SwiftUI UI知识点

1.关于 Binding 中重写 get、set 方法；实现文本框有值，则按钮可点击，反之。

image.png

例子：
@State var isLoginEnable: Bool = false
@State var phoneString: String = ""

let phoneBinding = Binding(get: {
    self.phoneString
 }, set: {
      self.phoneString = $0
       // 可做些操作
      self.isLoginEnable = !self.phoneString.isEmpty
 })
            
TextField("请输入手机号", text: phoneBinding) {
      print(self.phoneString)
}

Button {
    print("登录")
} label: {
    Text("登录")
        .font(Font.system(size: 15))
        .foregroundColor(.white)
        .frame(width: 120, height: 40)
}
.background(Color.yellow.opacity(self.isLoginEnable ? 1 : 0.5))
.cornerRadius(8)
.disabled(!self.isLoginEnable)

2.关于 .compositingGroup() 的理解

可以理解为，将所有视图组合在一起，之后再将 例如shadow、opacity等修饰到这个组合好的视图上
例子：2

ZStack{
    Rectangle().frame(width: 50, height: 50, alignment: .center).foregroundStyle(.yellow)
    Rectangle().offset(x: 10, y: 10).frame(width: 50, height: 50, alignment: .center).foregroundStyle(.green)
    Rectangle().offset(x: 20, y: 20).frame(width: 50, height: 50, alignment: .center).foregroundStyle(.blue)
 }
.padding()
.background(.red)
.shadow(color: .black, radius: 8)
.opacity(0.25)

• 未添加 compositingGroup() 效果图

  
  
  未添加 compositingGroup.png
  
  

  每个视图都含有 ZStack 修饰的 shadow、opacity 效果。

• 添加 compositingGroup() 效果图

  
  
  image.png
  
  

  将所有视图组合成一个视图后，进行 shadow、opacity修饰。

3. Binding类型的实例，可以使用动画修饰: .animation(...)

例子：

@State var isLoginEnable: Bool = false
@State var phoneString: String = ""

VStack {
    Toggle(isOn: $isLoginEnable.animation(Animation.spring())) {
        Text("phone")
    }
            
    if self.isLoginEnable {
         TextField("input phone please", text: $phoneString)
           .padding()
           .border(Color.green, width: 1)
    }
}.padding()

4. withAnimation(Animation.easeInOut) { }

例子：

Button {
  // 动画改变 某属性的值
   withAnimation(Animation.easeInOut) {
        self.isLoginEnable.toggle()
   }
} label: {
      Text("show picture")
}

if self.isLoginEnable {
      Image(systemName: "circle.grid.cross")
           .frame(width: 120, height: 120)
                // transition 配合 withAnimation { } 执行动画修改属性值。起到动画效果
//        .transition(.move(edge: .top)) 从顶部行下移动显示
//         .transition(.scale(scale: 0.0)) 缩放显示
//         .transition(.slide) // 平移显示
//         .transition(.asymmetric(insertion: .scale(scale: 0), removal: .slide)) 显示: scale缩放显现；移除：slide 平移移除效果
           .transition(AnyTransition.scale(scale: 0).combined(with: .opacity)) // 动画结合，scale 伴随 opacity动画效果显示
}

5. 关于 @GestureState 修饰的属性， 在手势结束时SwiftUI会自动将@GestureState修饰的属性值恢复为初始值

使用 .updating()
例子：

// 在手势结束时SwiftUI会自动将@GestureState修饰的属性值恢复为初始值
@GestureState var isLong: Bool = false

LongPressGesture().updating($isLong, body: { value, state, transaction in
    state = value
}

6. 多手势 Gesture 结合，可使用 .simultaneously(with: xxxGestrue)

例子:

// 在手势结束时SwiftUI会自动将@GestureState修饰的属性值恢复为初始值
@GestureState var isLong: Bool = false
@State var offset: CGSize = .zero

// simultaneously：共同地
let dragGestrue = DragGesture()
         .onChanged { value in
                   self.offset = value.translation
         }
         .onEnded { value in
              if(abs(value.translation.width) >= 40 || abs(value.translation.height - (-260)) >= 40){
                self.offset = .zero
              } else {
               self.offset = CGSize(width: 0, height: -260)
              }
         }
         .simultaneously(with: longGestrue) // simultaneously：共同地

Circle()
    .fill(Color.green)
    .frame(width: 120, height: 120, alignment: .center)
    .offset(self.offset) // 用于拖动的
    .scaleEffect(isLong ? 1.5 : 1)
    .gesture(dragGestrue)
    .animation(Animation.spring(), value: self.offset)

7. 关于 Group{ }：所设置的修饰属性，会作用在所包含在里面的子视图

例子：

Group { // 所设置的修饰属性，都会作用在所包含在里面的子视图
  Text("Apple")
  Text("Banana")
  Text("Orange")
}
 .font(.subheadline)
 .foregroundColor(.orange)
 .padding(.bottom, 2)

Group中的 Text 都会被设置的属性  .font、.foregroundColor、.padding 修饰

8. 关于 List，可以设置.listStyle(style: ListStyle) 改变列表的样式；List 组件不存在 onDelete、onInsert、onMove,只能配合 ForEach。List 中创建 ForEach，对ForEach进行操作。

• 如果想直接遍历数组中得元素，则数组中的元素需要遵守 Identifiable 协议。默认重写属性：var id = UUID()
• 针对 onDelete（可以不用配合 EditButton）、onMove 配合EditButton() 使用

疑问❓：onInsert不晓得怎么使用。