SwiftUI 精通之路 13: Button 按钮基本使用

zyosasa
629 阅读5分钟

前言

CleanShot 2024-10-26 at 19.49.47.png 今日宜：收集快乐！

正文

进入正文，我们第一步还是首先创建我们的工程文件，我们打开我们创建的项目添加新的文件。Xcode 顶部的 File > New > File form Template... 快捷打开创建模板面板的的快捷键是 ⌘ + N.

我们创建名称为 ButtonBootcamp.swift 的文件, 本章节我们学习 SwiftUI 中使用频率很高的组件 Button 按钮组件.

CleanShot 2024-10-26 at 19.47.22.png

我们将从 Button 的基本使用，按钮样式的更换，以及按钮的高级用法三部分学习掌握按钮组件的使用.

1. Button 的基本使用

VStack {
    //  使用文本标题进行初始化按钮
    Button("点击我！") {
        print("按钮被点击了！")
    }
    
    // 使用自定义视图进行初始化按钮
    // 例如图标和文字组合、图片等，便于更灵活地定义按钮内容：
    Button {
        print("按钮被点击了！")
    } label: {
        Text("点击我！")
    }
}
CleanShot 2024-10-26 at 20.47.38.png

Button 按钮样式

我们已经知道 SwiftUI 中按钮组件的基本使用，并且我们在上一章节中也简单了创建了按钮，相信大家都对它不陌生！

对于按钮的样式，SwiftUI 中内置了几种按钮样式，可以基本满足我们的设计需求！如果有其他定制化的需求，我们在后续的学习中也会进行提及（比如按钮样式的自定义）.

文本样式 PlainButtonStyle

纯文本按钮样式，移除了按钮的背景效果，更像一个普通的文本视图

// 文本样式按钮效果
Button("点击我！") {
    print("按钮被点击了！")
}
.buttonStyle(PlainButtonStyle())
// 另一种方式
//.buttonStyle(.plain)

CleanShot 2024-10-26 at 21.04.12.png

你可能会觉得这样貌似没有什么区别，这是因为 SwiftUI 在手机端对组件样式有一定的优化，我们可以更换 macOS 端 预览上查看显示看看效果！

CleanShot 2024-10-26 at 21.12.58.gif

如果你发现你的项目里面没有 My Mac 这个选项，那么你可以这样设置添加：

CleanShot 2024-10-26 at 21.15.23.gif

我们可以很清楚的看到默认的按钮视图是具有颜色背景的，但是如果是文本样式的按钮是没有背景颜色的

CleanShot 2024-10-26 at 21.16.55.png

除了文本样式，内置的按钮是有下面这些样式

无边界按钮样式 BorderlessButtonStyle

这种样式通常用于列表中的按钮，允许在列表中点击时没有背景效果（类似于纯文本样式）。

Button("无边框样式") {
    print("按钮被点击了")
}
.buttonStyle(BorderlessButtonStyle())
// 另一种写法
//.buttonStyle(.borderless)
CleanShot 2024-10-26 at 21.21.48.png

BorderedButtonStyle

在 iOS 15 和 macOS 12 中新增的样式，带有边框，类似于标准的按钮效果。

Button("边框样式") {
    print("按钮被点击了")
}
.buttonStyle(BorderedButtonStyle())
//.buttonStyle(.bordered)
CleanShot 2024-10-26 at 21.31.32.png

还有还有一些样式，但是大差不差，你可以自行探索下，目前用的比较多的是文本样式，因为我喜欢自定义按钮的样式效果，希望背景这些可以自己定义！

下面我们了解下按钮的一些相对高级点的应用，比如我们如何实现按钮的禁用效果

我们可以使用 .disabled 修改按钮可用状态

@State private var isDisabled = true

Button("禁用按钮") {
    print("按钮被点击了")
}
.disabled(isDisabled)

@State 这个变量我们在后续的章节中会进行介绍，它主要就是我们在当前的环境中存储一个值，我们可以更改它的值而不会受到当前视图刷新而重新初始化这个值，这个就避免了变量的多次刷新

使用@State定义的变量只有在当前视图首次加载时候才会初始化，后续视图刷新都不会进行重复初始化！

CleanShot 2024-10-26 at 21.39.21.png

按钮图标

我们可以创建包含图标的按钮，文本跟图片进行结合，其实我们前面也有提及这个概念，在按钮初始化的时候

Button(action: {
    print("带图标的按钮被点击了")
}) {
    Label("收藏", systemImage: "star.fill")
}

CleanShot 2024-10-26 at 21.42.53.png

使用 ButtonRole 配置按钮角色

Button("删除", role: .destructive) {
    print("删除按钮被点击了")
}
CleanShot 2024-10-26 at 21.45.21.png

在 iOS 15 中，引入了 ButtonRole 参数，可以为按钮定义特殊的角色，例如 .destructive 或 .cancel。

.destructive：用于危险操作，例如删除操作，系统会为其提供视觉提示。

.cancel：用于取消操作，在弹窗或操作表中表示取消选择。

其实这块，你可以能会有些疑问，那么这个角色按钮到底是什么作用，其实他就是语义化的作用，赋予按钮操作一种特殊的语义，使系统或用户可以更容易理解按钮的意图。例如 .destructive 角色

.destructive 角色用于表示“危险”或“不可逆”的操作。典型的例子包括“删除”、“重置”、“清空数据”等。SwiftUI 会自动为 .destructive 按钮应用红色字体或强调样式（取决于系统风格），提醒用户这个操作可能导致数据丢失或其他重要影响。

如果你不想添加角色，那么你想要角色的效果，你也是可以自定义实现！

最后呢，我们将我们的预览视图切换回手机端，查看下手机的预览的效果！

CleanShot 2024-10-26 at 21.53.17.png CleanShot 2024-10-26 at 21.51.41.gif 好的，关于 SwiftUI 中按钮的部分目前我们先了解到这些！

我们认识了 Button 按钮的基本使用，以及我们学习了按钮 内置样式的切换，按钮的点击状态的禁用，按钮角色的应用等，希望这些对你使用 Button 有帮助！

对了，我们给按钮分配角色仅仅是帮助我们设置按钮的视觉效果，SwiftUI 并不会内置自动给他分配功能！

如果这章对你有帮助，希望你可以点赞或者留言，大家一起进步！

avatar
文章
阅读
粉丝