Button使用

SwiftUI中，Button类似于UIKit中的UIButton，用法如下：

Button(action: {
            //同UIKit，点击后会执行该闭包
        }) {
            Text("按钮")
        }

运行结果：

image.png

设置背景色

接下来，我们给Button设置背景色和大小

        Button(action: {
            //同UIKit
        }) {
            Text("按钮")
        }
            //大小
            .frame(width: 100, height: 40)
            //背景色
            .background(Color.yellow)
            //文字颜色
            .foregroundColor(.white)

结果如下：

image.png

看起来很完美，达到了我们的需求。但是使用的时候会发现一个问题：只有点击文字才会触发action，点击黄色区域是不会触发的！

解决问题

产生这个问题的原因是，设置Button的大小背景色等，只是设置在了Button上面，而触发action是有内部的Text触发的，所以，我们不应该设置Button，而应该设置内部Text的大小和背景。

代码如下：

Button(action: {
            //同UIKit
        }) {
            Text("按钮")
                //大小
                .frame(width: 100, height: 40)
                //背景色
                .background(Color.yellow)
                //文字颜色
                .foregroundColor(.white)
        }

好了，问题解决。

以此类推

所以，当给Button设置Image等的时候，也需要这样操作。

Button(action: {}) {
                HStack {
                    
                    Image(systemName: "rectangle.grid.1x2.fill")
                    Text("按钮2")
                }
                .padding()
                .background(Color.yellow)
            }

image.png