SwiftUI 要點筆記

SwiftUI

要點筆記

• resizable() 自適應大小 * 圖片沒有完全顯示全，我們可以用Image的resizable()來讓圖片自動適應

• .aspectRatio(contentMode: .fit) 設置圖片的顯示模式

• Identifiable主要作用就是作為一個對象的唯一標識。能夠與List一起列出。List可以像UITableViewController一樣顯示可標識集合中的數據列表

• .frame(minWidth: 0, maxWidth: .infinity) 設置控件鋪滿整個屏幕

• SwiftUI 有兩種載入圖片方式

  • 一種放到Assets.xcassets 文件夾中 Image("文件名")
  • 一種直接放到項目中 Image(uiImage: UIImage(imageLiteralResourceName: "文件名.文件格式"))

  出現No image named found in asset catalog for main bundle問題通常是沒有正確使用好載入方式

• clipped() 將View裁剪成矩形 默認情況下，視圖的邊界框架僅用於布局，因此超出框架邊緣的任何內容仍然可見。使用clipped(antialiased:)修飾器可以隱藏超出這些邊緣的任何內容。

• UIScreen.main.bounds.width 獲取屏幕大小

• .resizable() .scaledToFit() 照片大小適中 Image("circle") .resizable() .scaledToFit() .frame(minWidth:nil, idealWidth: nil, maxWidth: UIScreen.main.bounds.width, minHeight: nil, idealHeight: nil, maxHeight: 300, alignment: .center )

• 自定義上下左右任意圓角位置和度數 ` struct RoundedCorners: View { var color: Color = .blue var tl: CGFloat = 0.0 var tr: CGFloat = 0.0 var bl: CGFloat = 0.0 var br: CGFloat = 0.0

  var body: some View { GeometryReader { geometry in Path { path in

   let w = geometry.size.width  let h = geometry.size.height   // Make sure we do not exceed the size of the rectangle  let tr = min(min(self.tr, h/2), w/2)  let tl = min(min(self.tl, h/2), w/2)  let bl = min(min(self.bl, h/2), w/2)  let br = min(min(self.br, h/2), w/2)   path.move(to: CGPoint(x: w / 2.0, y: 0))  path.addLine(to: CGPoint(x: w - tr, y: 0))  path.addArc(center: CGPoint(x: w - tr, y: tr), radius: tr, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false)  path.addLine(to: CGPoint(x: w, y: h - br))  path.addArc(center: CGPoint(x: w - br, y: h - br), radius: br, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 90), clockwise: false)  path.addLine(to: CGPoint(x: bl, y: h))  path.addArc(center: CGPoint(x: bl, y: h - bl), radius: bl, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 180), clockwise: false)  path.addLine(to: CGPoint(x: 0, y: tl))  path.addArc(center: CGPoint(x: tl, y: tl), radius: tl, startAngle: Angle(degrees: 180), endAngle: Angle(degrees: 270), clockwise: false)  }  .fill(self.color)  }

  } } `

• Decodable 能夠從JSON文件中對其進行解碼

• swiftUI多選https://stackoverflow.com/questions/56706188/how-does-one-enable-selections-in-swiftuis-list

• SwiftUI 制作內容類App的一般流程 SwiftUI基本思想

數據驅動 創建個struct 用於結構化存儲對象 創建個讀寫數據的data.swift 界面顯示

• mutating 類是引用類型，而結構和枚舉是值類型。這意味着類對象共享該對象的單個實例，並在傳遞給任何函數或新對象時傳遞相同的引用，而值類型是創建其副本並僅傳遞值的類型 值類型，我們不能夠直接修改屬性 在值類型中向任何函數添加突變關鍵字可以使它們能夠修改變量。在內部，當我們嘗試突變值類型時，它不會mutate其值，但它會mutate持有該值的變量。

• RandomAccessCollection 支持高效隨機訪問的集合

• Spacer()可以將Stack撐開鋪滿全屏

• edgesIgnoringSafeArea 忽略安全區域留海和底部

• 容器都是有10個對象的限制 VStack HStack ZStack Group List

• 獲得struct名稱的兩種方式 print(String(reflecting: a.self)) print("(a.self)")

• 泛型占位常用字符T（MyTypeParameter），U和V表面是占位符不是值

• 超長文本可以有兩種解決方案 直接省略 .scaledToFit() .lineLimit(nil) 自動縮小換行 minimumScaleFactor(0.3)

• fixedSize() -> View 將視圖固定為理想尺寸。

• fixedSize(horizontal: Bool, vertical: Bool) -> View 將視圖固定為指定尺寸的理想尺寸。

• func listRowInsets(EdgeInsets?) -> View 設置插入列表時要應用於視圖的插入占位填充。

• func listRowBackground(V?) -> View 當放置在列表中時，在視圖后面設置一個視圖。

• func listRowPlatterColor(Color?) -> View 設置當放置在列表中時應用於視圖系統單元盤的顏色。

要點筆記

• alignment: 布局對齊格式, 默認為 .center

• spacing: 子 View 的間距, 系統默認為 8

• 如何把 View 分到 左右兩邊

  • 中間增加 Spacer() Spacer 會使用父視圖所有的空間，徹底的展開，不需要通過指定內容大小等屬性，插入Spacer就相當於插入空白占位空間，比如說想讓某個組件居中，可以左右各插入一個Spacer。

• renderingMode 圖片渲染樣式，一般設置原始樣式original

• layoutPriority 設置父級布局應將空間分配給子級的優先級。默認優先級為0。在一組同級視圖中，提高視圖的布局優先級會鼓勵該視圖在縮小組時縮小，而在拉伸組時更快。當空間不夠的情況下，優先級越高，展示的越完善，其他同級的子控件會壓縮空間顯示

• position(CGPoint) -視圖的中心點設置 將視圖的中心固定在其父級坐標空間中的指定點 position(x: CGFloat, y: CGFloat) -> View 將視圖的中心固定在其父級坐標空間中的指定坐標處

• offset(x: CGFloat, y: CGFloat) 使視圖偏移指定的水平和垂直距離

• edgesIgnoringSafeArea(Edge.Set) 將視圖擴展到指定邊緣的安全區域之外

  問題記錄

  List的子視圖上添加Button，Button事件會覆蓋整個子視圖，也就是List中cell的點擊事件也會觸發Button點擊事件

1. SwiftUI 中使用 UIView 子類，需要將其他 view 包裝在遵循 UIViewRepresentable 協議

2. UIViewRepresentable 協議需要實現兩個方法：

   • makeUIView(context:) 用來創建視圖，
   • updateUIView(_:context:) 用來配置 view 並響應修改。

3. 可以用這個 coordinator 實現常見的 Cocoa 模式，例如代理、數據源以及通過 target-action 響應用戶事件。SwiftUI 會在調用 makeUIViewController(context:) 方法之前調用 makeCoordinator() 方法，這樣配置 view controller 時，我們可以訪問 coordinator 對象。

• truncationMode 太長而無法容納可用空間的文本行設置截斷模式

• ViewModifier視圖修改器,可以用於將視圖布局修飾樣式抽離封裝 func modifier(T) -> ModifiedContent<Self, T> 將修改器應用於視圖。

 struct SearchBarTextModifier: ViewModifier {  func body(content: Content) -> some View {  content  .frame(height:40)  .padding(EdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8))  .border(Color.gray,width:4)  .cornerRadius(8)  .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 4))  }  }

TextField("Search",text: $searchStr) .modifier(SearchBarTextModifier())