SwiftUI 学习

@Environment 含义

在SwiftUI中，修饰词的顺序会影响到最后的效果，所以一定要按照顺序来写UI组件的修饰词
比如下面这段代码:

struct ButtonView: View {
  var body: some View {
      GeometryReader { geo in
          Button (action: {
            
          }){
              Image(systemName: "heart.fill")
                .frame(width: 20, height: 20, alignment: .leading)
              Text("这是一个按钮")
          }
          .frame(width: geo.size.width, height: geo.size.height)
          .background(.yellow)
          .cornerRadius(12)
          .buttonStyle(.plain)
      }
  }

}

显示效果如下：

image.png

但是如果我们调整了 `frame 和 cornerRadius 修饰词的顺序：

 struct ButtonView: View {
    var body: some View {
        GeometryReader { geo in
          Button (action: {
            
          }){
              Image(systemName: "heart.fill")
                .frame(width: 20, height: 20, alignment: .leading)
              Text("这是一个按钮")
          }
          .cornerRadius(12)
          .background(.yellow)
          .frame(width: geo.size.width, height: geo.size.height)
          .buttonStyle(.plain)
        }
    }
}

效果变成了这样子：

image.png

这是因为在Swift 中， View的都是结构体对象， 在SwiftUI中每个修饰词处理以后返回的都是一个新的对象， 而不是像之前在视图上设置属性