1.关于 Binding 中重写 get、set 方法;实现文本框有值,则按钮可点击,反之。
image.png
例子:
@State var isLoginEnable: Bool = false
@State var phoneString: String = ""
let phoneBinding = Binding<String>(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<xxx>类型的实例,可以使用动画修饰: .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不晓得怎么使用。