75142913在线留言
【SwiftUI基础篇】5 表单控件之Button(按钮)的详细使用说明_IOS开发_网络人

【SwiftUI基础篇】5 表单控件之Button(按钮)的详细使用说明

Kwok 发表于:2021-04-02 08:02:25 点击:6 评论: 0

按钮是一种触发时执行操作的控件。分为2个部分:视图与动作。SwiftUI里的按钮和普通视图使用方法是一样的。只是对其增加了特有的特性,按钮的action是一个方法或闭包属性,当用户单击或点击按钮时,它会做一些事情。标签是描述按钮操作的视图。

一、Button按钮的基本用法

Button 需要一个 action 和一个 label,前者的类型是 () -> Void,也就是点击会回调的函数,后者是个表示 Button 的样式的视图。

Button(action: {
    print("运行登陆验证")
}){
    Text("登录")
}

对于视图仅仅是文字的情况,Button提供另一个初始方法,可以在第一个参数里传入 String。

Button("登录", action: {
    print("做啥?")
})
//闭包简写如下
Button("登录"){
    print("你瞅啥?")
}
.contentShape(Rectangle())//可以扩大点击区域

在不同的系统平台触发按钮的方式不同:

1、在iOS和watchOS中,用户通过点击一个标准按钮来触发它。

2、在macOS中,用户通过单击来触发一个标准按钮。

3、在tvOS中,用户在专注于按钮的同时,按下外部遥控器上的“选择”按钮,比如Siri遥控器,就会触发一个标准按钮。

有的人还喜欢这样使用按钮:

//利用Label使用图片样式
Button(action: {
    print("Say something!")
}, label: {
   Label("你干哈?", systemImage:"arrowshape.turn.up.backward.circle.fill")
})

效果和第一种差不多,只是用法上的区别,可以根据自己的需要与喜欢的方式去使用。

上面都是打印信息,我们实际使用中一般都是触发某种操作,这里用代码简单的演示一下怎么点击显示/隐藏内容:

struct ContentView: View {
    @State private var showDetails = false//定义一个默认显示状态
    var body: some View {
        VStack(alignment: .leading) {
            Button( showDetails ? "隐藏简介" : "显示简介") {
                showDetails.toggle()
            }
            if showDetails {
                Text("你点击了显示简介按钮,这里可以使用样式对齐格式化。")
                    .font(.largeTitle)
            }
        }
    }
}

关于@State状态与数据流可以访问:http://www.neter8.com/ios/114.html 有非常详细的介绍!

 

二、利用buttonStyle 装饰按钮

ButtonStyle主要应用于整个APP中的标准按钮设计,自定义按钮样式可以方便统一修改与定义。使用ButtonStyle需要定义一个符合协议的新结构体,该结构将根据需要通过按钮的配置来执行操作。

//定义一个符合ButtonStyle协议的结构体用于用户按下时的样式设置
struct GrowingButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label//描述按下按钮的效果的视图。
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .clipShape(Capsule())
            //isPressed是一个布尔值,指示用户当前是否正在按下按钮
            .scaleEffect(configuration.isPressed ? 1.2 : 1)
            .animation(.easeOut(duration: 0.2))//动画
    }
}

然后我们在按钮上就可以这样使用了:

Button("你点我试试?") {
    print("这是按钮触发的操作~")
}
.buttonStyle(GrowingButton())//将上面的按钮样式给安排上

除了我们上面自己定义的GrowingButton外,系统还内置了几种buttonStyle:

1、PlainButtonStyle 普通按钮样式按钮样式在空闲时不会设置样式或修饰其内容,但可以应用视觉效果来指示按钮的按下,聚焦或启用状态。

2、BorderlessButtonStyle 不应用边框的按钮样式。

3、PrimitiveButtonStyle 原始按钮样式,将自定义交互行为和自定义外观应用于视图层次结构中的所有按钮(上面自定义的就是这种)。

当然还有其它的,可以看文档查看,注意适合的平台,上面列出的几种是多平台通用的。部分样式只适用于TVOS或者MACOS等。

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/119.html
标签:按钮Kwok最后编辑于:2021-04-02 13:02:36
0
感谢打赏!

《【SwiftUI基础篇】5 表单控件之Button(按钮)的详细使用说明》的网友评论(0)

本站推荐阅读

热门点击文章