swiftUI笔记

发表于 2023-07-01 更新于 2023-07-06 分类于 swiftui

概念

Source of Truth:
value type: struct, enum, Int 等
reference type: class
observable:

@State 将值类型标记为真实数据源

将property包装为真实数据源(Source of Truth). 当@State property 修改时, 依赖的此property 的 View 都会刷新. @State 只能包装值类型(Value Type), 比如: struct, enum

@Bingding

@Binding 修饰的 property 可以与一个单一数据源(Source of Truth), 共享读写. @Binding 不会直接存放数据

$ 语法

用 $变量名 , 可以创建Bingding

@ObservedObject, @StateObject, @EnvironmentObject 将引用类型(reference type) 标记为真实数据源(source of truth)

class 实现 ObservableObject 表示 class 是可观察的(observable), 值修改需要重绘UI的属性, 用@Published 标记. published属性变化时, 会通知所有观察者

监听: UI组件通过 ObservedObject, StateObject, 或者 EnvironmentObject 标记属性, 来实现对 observable属性的监听(成为该属性的观察者), 被标记的视图属性, 会创建对应的真实数据源(source of truth)

创建可观察对象时用 @StateObject 声明. 要从外部传入的可观察对象用 @ObservedObject 声明.

一些特性

This limit of 10 children inside a parent actually applies everywhere in SwiftUI.
// SwiftUI很多View都限制最多只能10个子ViewGroup 可对子View分组来避免超过10个的限制，而且不会改变显示效果

How To

@FocusState 属性包装器控制 SwiftUI 控件的聚焦状态，通过 .focused modifier 来绑定
Text, TextField 等可以使用 format 属性设置格式
TextField 使用 .keyboardType modifier 设置键盘类型

Locale 结构体可以获取本地化相关的设置，如：货币、时间格式、数字格式等

@FocusState private var amountIsFocused: Bool
//...
TextField("Amount", value: $checkAmout, format: .currency(code: Locale.current.currency?.identifier ?? "CNY"))
                        .keyboardType(.decimalPad)
                        .focused($amountIsFocused)

通过 ToolbarItemGroup 视图可以给键盘加工具栏

.toolbar{
      // keybord 加工具栏
      ToolbarItemGroup(placement: .keyboard) {
          Spacer()
          Button("Done"){
              amountIsFocused = false
          }
      }
  }

Button 可以使用.buttonStyle modifier 设置样式，用.tint modifier 进行自定义颜色设置。如果要完全定制，则用lable 尾闭包参数

Button("Button 3") { }
    .buttonStyle(.borderedProminent)
    .tint(.mint)
Button {
    print("Button was tapped")
} label: {
    Text("Tap me!")
        .padding()
        .foregroundColor(.white)
        .background(.red)
}

关于Image
1. Image("pencil") will load an image called “Pencil” that you have added to your project.
2. Image(decorative: "pencil") will load the same image, but won’t read it out for users who have enabled the screen reader. This is useful for images that don’t convey additional important information.
3. Image(systemName: "pencil") will load the pencil icon that is built into iOS. This uses Apple’s SF Symbols icon collection, and you can search for icons you like – download Apple’s free SF Symbols app from the web to see the full set.

弹框 Alert，通过.alert modifer 来添加一个弹框，这个modifier在哪里调用的都没关系。它需要绑定一个状态来判断是否显示，Alert通过 actions尾闭包View添加操作按钮，里面的Button 点击都会自动关闭Alert。通过message尾闭包View添加消息体，显示更详细的信息，message 里可以添加 button,label 等，但都不会显示出来

struct AlertDemo: View {
    @State var isShowAlert = false
    
    var body: some View {
        
        Button("Warnig"){
            isShowAlert = true
        }
        .alert("Important Messages", isPresented: $isShowAlert) {
            Button("OK"){} // alert 里的Button 都会自动关闭弹窗
        } message: {
            VStack{
                Text("And finally, you can add message text to go alongside your title with a second trailing closure, like this.") //详细信息
                Label("Label In Message", systemImage: "heart.fill") //不会显示
                Button("message body button"){} // 不会显示
            }
        }
    }
}

关于Spacer。存在多个Spacer 时，它们会平分空白空间，所以用两个连续的Spacer 就可以获取的两倍的空间，多个同理。
关于modifier， modifier 的顺序对结果是有影响的。调modifier 返回的类型是ModifiedContent<AView, AModifier>, 这也是个View，再调用modifier就是ModifiedContent<ModifiedContent<AView, AModifier>,BModifier>, 更多的modifier就是更多层嵌套
environment modifier, 指可以用在容器上的modifier, 相当于到容器中的所有View同时使用了这个modifier
1
2
3
4
5
6
7
VStack {
Text("Gryffindor")
Text("Hufflepuff")
Text("Ravenclaw")
Text("Slytherin")
}
.font(.title)
如上面的代码，所有Text 的字体都是设置成.title，容器里的子View，也可以显示指定modifier来覆盖evvironment modifier。普通的modifier 不会有覆盖的功能，而且没有办法知道哪些是 environment modifier哪些是普通的。
todo

概念

@State 将 值类型 标记为 真实数据源