专栏首页韦弦的偶尔分享SwiftUI:按钮和图片

SwiftUI:按钮和图片

SwiftUI中的按钮有两种显示方式,具体取决于外观。

制作按钮的最简单方法是当它仅包含一些文本时:传递按钮的标题,以及点击按钮时应运行的闭包:

Button("Tap me!") {
    print("Button was tapped")
}

如果您还需要其他东西,例如图片或视图组合,则可以使用此替代形式:

Button(action: {
    print("Button was tapped")
}) { 
    Text("Tap me!")
}

当您要将图片显示到按钮中时,这尤其常见。

SwiftUI具有用于处理应用程序中图片的专用Image类型,您可以通过三种主要方式创建它们:

  • Image("pencil")将加载您已添加到项目中的名为“ Pencil”的图片。
  • Image(decorative: "pencil")将加载相同的图像,但不会为启用了屏幕阅读器(苹果辅助功能)的用户加载。这对于不传递其他重要信息的图片很有用。
  • Image(systemName: "pencil")将加载iOS内置的"Pencil(铅笔)"图标,它使用Apple的SF Symbols图标集,从网络上下载Apple的免费SF Symbols应用程序以查看完整的图标集,您可以搜索您所需的图标。

默认情况下,如果启用了屏幕阅读器,它将读取您的图像名称,因此,如果要避免混淆用户,请确保为图像提供清晰的名称。或者,如果他们实际上并未添加屏幕上其他地方尚未存在的信息,请使用Image(decorative: "pencil")初始化程序。

由于较长形式的按钮内部可以具有任何视图,因此可以这样使用图片:

Button(action: {
    print("Edit button was tapped")
}) { 
    Image(systemName: "pencil")
}

当然,您可以将它们与堆栈结合使用以制作更高级的按钮布局:

Button(action: {
    print("Edit button was tapped")
}) {
    HStack(spacing: 10) { 
        Image(systemName: "pencil")
        Text("Edit")
    }
}

提示:如果您发现图像已被某种颜色填充,例如显示为纯蓝色而不是实际图片,则可能是SwiftUI为它们着色以显示它们是可点击的。要解决此问题,请使用renderingMode(.original)修饰符强制SwiftUI显示原始图像,而不是重新着色的版本。

Buttons and images >

Previous: 渐变色

Next: Alert弹窗

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SwiftUI:contextMenu 菜单

    当用户点击按钮或导航链接时,很明显,SwiftUI应该触发这些视图的默认操作。但是,如果他们按住某些东西怎么办?在较旧的iPhone上,用户可以通过用力按压某些...

    韦弦zhy
  • SwiftUI:ActionSheet 弹窗

    SwiftUI给我们Alert提供了一个或两个按钮来显示重要的公告,而sheet()给了我们用于在当前视图的顶部显示整个视图的信息,但是它也为我们提供了Acti...

    韦弦zhy
  • 100 Days of SwiftUI —— Day 5:函数

    函数使我们可以包装代码片段,以便可以在许多地方使用它们。我们可以将数据发送到函数中以自定义它们的工作方式,并取回告诉我们计算结果的数据。

    韦弦zhy
  • 微信好友全头像直接上图代码代码分析

    罗罗攀
  • 面试再问HashMap,求你把这篇文章发给他!

    总所周知 HashMap 是面试中经常问到的一个知识点,也是判断一个候选人基础是否扎实的标准之一,因为通过 HashMap 可以引出很多知识点,比如数据结构(数...

    Java技术栈
  • Java并发指南13:Java 中的 HashMap 和 ConcurrentHashMap 全解析

    本文是微信公众号【Java技术江湖】的《Java并发指南》其中一篇,本文大部分内容来源于网络,为了把本文主题讲得清晰透彻,也整合了很多我认为不错的技术博客内容,...

    Java技术江湖
  • JDK8中的HashMap实现原理及源码分析

    在写上一篇线性表的文章的时候,笔者看的是Android源码中support24中的Java代码,当时发现这个ArrayList和LinkedList的源码和Ja...

    技术zhai
  • 深入解析HashMap那些不为人知的事

    光从名字上应该也能猜到,HashMap肯定是基于hash算法实现的,这种基于hash实现的map叫做散列表(hash table)。

    慕容千语
  • 面试再问 HashMap,求你把这篇文章发给他!

    HashMap是面试中经常问到的一个知识点,也是判断一个候选人基础是否扎实的标准之一,因为通过HashMap可以引出很多知识点,比如数据结构(数组、链表、红黑树...

    乔戈里
  • itchat库初探--微信好友全头像的拼接

    如果安装python的时候pip安装选项没打√ ,就先安装pip。 Python和pip的安装

    意气相许的许

扫码关注云+社区

领取腾讯云代金券