SwiftUI之Button点击

SwiftUI之Button点击

Button使用

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

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

运行结果：

设置背景色

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

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

结果如下：

看起来很完美，达到了我们的需求。但是使用的时候会发现一个问题：只有点击文字才会触发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)
}