owned this note
owned this note
Published
Linked with GitHub
# IOS
## 各種連結
+ [我的程式碼](https://github.com/Popcorn0924-0924/IOS-3-MARVEL/tree/main/00857202_3)
+ [ch10](https://drive.google.com/file/d/1Eclomt3FfBF887oUcvTB2D0GVHajJbD8/view)
+ [ch9](https://trello.com/c/WTTQiSbU/29-%E4%BD%BF%E7%94%A8-swiftui-%E5%89%B5%E4%BD%9C-crud-%E7%B4%80%E9%8C%84app)
+ [binding](https://drive.google.com/file/d/1wDVGyRbEefaFfzeJ1fykXkuihBV13aYN/view)
+ [random](https://medium.com/%E6%B5%B7%E5%A4%A7-ios-app-%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88/bonus-%E4%BA%82%E6%95%B8%E7%B7%B4%E7%BF%92%E4%B9%8B%E5%88%B0%E5%BA%95%E8%A6%81%E5%B9%B9%E5%98%9B-29063ff8b5b4)
+ [動畫](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E7%9A%84-animation-%E5%8B%95%E7%95%AB-2f8eb72d2756)
+ [SwiftUI 選時間的歲月神偷 — DatePicker](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E9%81%B8%E6%99%82%E9%96%93%E7%9A%84%E6%AD%B2%E6%9C%88%E7%A5%9E%E5%81%B7-datepicker-22491c08bc93)
+ [SwiftUI 選擇項目的 Picker & 我要選李白](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E9%81%B8%E6%93%87%E9%A0%85%E7%9B%AE%E7%9A%84-picker-%E6%88%91%E8%A6%81%E9%81%B8%E6%9D%8E%E7%99%BD-aabd95adc601)
+ [SwiftUI 設計 UI 元件樣式的各種方法 ](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E8%A8%AD%E8%A8%88-ui-%E5%85%83%E4%BB%B6%E6%A8%A3%E5%BC%8F%E7%9A%84%E5%90%84%E7%A8%AE%E6%96%B9%E6%B3%95-5350da28bc89)
+ [SwiftUI 擅長展開 & 折疊的 DisclosureGroup](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E6%93%85%E9%95%B7%E5%B1%95%E9%96%8B-%E6%8A%98%E7%96%8A%E7%9A%84-disclosuregroup-8a41010fb4d9)
+ [利用 SwiftUI 繪製同時填滿顏色和線條的形狀](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-swiftui-%E7%B9%AA%E8%A3%BD%E5%90%8C%E6%99%82%E5%A1%AB%E6%BB%BF%E9%A1%8F%E8%89%B2%E5%92%8C%E7%B7%9A%E6%A2%9D%E7%9A%84%E5%BD%A2%E7%8B%80-86f0faee556d)
+ [SwiftUI 調整元件位置的幾種方法](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E8%AA%BF%E6%95%B4%E5%85%83%E4%BB%B6%E4%BD%8D%E7%BD%AE%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-f925e884cfd1)
+ [利用 NavigationView & NavigationLink 切換頁面](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-navigationview-navigationlink-%E5%88%87%E6%8F%9B%E9%A0%81%E9%9D%A2-3a062833230f)
+ [利用 SwiftUI 的 PageTabViewStyle 實現分頁照片瀏覽](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-swiftui-%E7%9A%84-pagetabviewstyle-%E5%AF%A6%E7%8F%BE%E5%88%86%E9%A0%81%E7%85%A7%E7%89%87%E7%80%8F%E8%A6%BD-cf307285ef20)
+ [格子狀排列的 LazyVGrid & LazyHGrid](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E6%A0%BC%E5%AD%90%E7%8B%80%E6%8E%92%E5%88%97%E7%9A%84-lazyvgrid-lazyhgrid-338a21a7afc3)
+ [link](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E9%BB%9E%E9%81%B8%E6%89%93%E9%96%8B%E9%80%A3%E7%B5%90%E7%9A%84-link-%E6%8C%89%E9%88%95-2b0c382f5468)
+ [讓 SwiftUI List 的 row 有多個可點選的 NavigationLink](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E8%AE%93-swiftui-list-%E7%9A%84-row-%E6%9C%89%E5%A4%9A%E5%80%8B-navigationlink-64e9b8ca6751)
+ [SwiftUI 讓 scaledToFill 圖片等於螢幕寬度的方法](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E8%AE%93%E5%9C%96%E7%89%87%E7%AD%89%E6%96%BC%E8%9E%A2%E5%B9%95%E5%AF%AC%E5%BA%A6-%E8%A8%AD%E5%AE%9A%E6%AF%94%E4%BE%8B%E7%9A%84%E6%96%B9%E6%B3%95-9e4ef427585e)
+ [SwiftUI 維持元件理想尺寸的 fixedSize (修正文字切掉問題)](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E7%B6%AD%E6%8C%81%E5%85%83%E4%BB%B6%E7%90%86%E6%83%B3%E5%B0%BA%E5%AF%B8%E7%9A%84-fixedsize-bce6d2442f92)
+ [利用 Stack，Rectangle & overlay 實現元件一樣大，固定比例 & 照片牆](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-stack-rectangle-overlay-%E5%AF%A6%E7%8F%BE%E5%85%83%E4%BB%B6%E4%B8%80%E6%A8%A3%E5%A4%A7-%E5%9B%BA%E5%AE%9A%E6%AF%94%E4%BE%8B-%E7%85%A7%E7%89%87%E7%89%86-dfe0923983aa)
+ [SwiftUI 裁切形狀的 clipShape & mask](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E8%A3%81%E5%88%87%E5%BD%A2%E7%8B%80%E7%9A%84-clipshape-mask-4fc49b34141)
+ [調整元件階層的 SwiftUI zIndex
](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E8%AA%BF%E6%95%B4%E5%85%83%E4%BB%B6%E9%9A%8E%E5%B1%A4%E7%9A%84-swiftui-zindex-72c0c6fc5b1a)
+ [用狀態設計 SwiftUI 畫面 — 認識 @State property，binding & Toggle](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E7%94%A8%E7%8B%80%E6%85%8B%E8%A8%AD%E8%A8%88-swiftui-%E7%95%AB%E9%9D%A2-%E8%AA%8D%E8%AD%98-state-property-binding-27fea6885ead)
+ [fullScreenCover()](https://www.hackingwithswift.com/quick-start/swiftui/how-to-present-a-full-screen-modal-view-using-fullscreencover)
+ [SwiftUI List Row 的 button 點選](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-list-row-%E7%9A%84-button-%E9%BB%9E%E9%81%B8-af13892c95ca)
+ [plist 設定 iOS App 的 Launch screen](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E4%BD%BF%E7%94%A8-plist-%E8%A8%AD%E5%AE%9A-ios-app-%E7%9A%84-launch-screen-a1781a6217f)
## 程式
> [color=#ed6f21]程式碼解釋
:::spoiler
1. 建個列表
```
@ObservedObject var timeData = MyTimeData()//綁定MyTimeData()，若MyTimeData()改變列表跟著變
@State private var showEditMyTime = false//修改的按鈕
```
2.timeData.myTimes為MyTimeData中第13 行
Published var myTimes = [MyTime]()//綁struct
```
ForEach(timeData.myTimes) { (mytime) in
NavigationLink(destination: MyTimeEditor(myTimesData: self.timeData, editMyTime: mytime)) {
MyTimeRow(myTime: mytime)//型態
```
3.點右上+可眺新增畫面(sheet)
```
.navigationBarItems(leading: EditButton() , trailing: Button(action: {
self.showEditMyTime = true
}) {
Image(systemName: "plus.circle.fill")
})
.sheet(isPresented: $showEditMyTime) {
NavigationView {
MyTimeEditor(myTimesData: self.timeData)
}
```
4.MyTimeEditor
+ @Environment(\.presentationMode) var presentationMode & self.presentationMode.wrappedValue.dismiss()可返回
```
@Environment(\.presentationMode) var presentationMode
var myTimesData: MyTimeData
@State private var name = ""
@State private var course = ""
@State private var type = ""
@State private var date = Date()
@State private var time = 0
@State private var isDone = false
var editMyTime: MyTime?
```
5.MyTimeEditor
```
.navigationBarItems(trailing: Button("Save") {
let myTime = MyTime(name: self.name, course: self.course, type: self.type, date: self.dateFormatter.string(from: self.date), time: self.time, isDone: self.isDone)
if let editMyTime = self.editMyTime {
let index = self.myTimesData.myTimes.firstIndex {
$0.id == editMyTime.id
}!
self.myTimesData.myTimes[index] = myTime
} else {
self.myTimesData.myTimes.insert(myTime, at: 0)
}
self.presentationMode.wrappedValue.dismiss()
})
```
:::
> [color=#ed6f21]重要(在第七章Data binding)
:::spoiler
https://drive.google.com/file/d/1wDVGyRbEefaFfzeJ1fykXkuihBV13aYN/view
+ date
[10years程式碼](https://github.com/hannn0919/2020_iOS_bonus2/blob/master/2020_iOS_bonus2/selfView.swift)
[10years程式碼](https://github.com/00757001/00757001-10years/blob/main/00757001-10years/ContentView.swift)
```
struct TenYearImage: View {
let width: CGFloat
let selectDate: Date
let brightnessAmount: Double
var year: Int {
return Calendar.current.component(.year, from: selectDate)
}
var body: some View {
Image("peter\(year)")
.resizable()
.scaledToFill()
.frame(width: width, height: width / 4 * 3)
.clipped()
.brightness(brightnessAmount)
}
}
```
+ slider
```
struct BrightnessSlider: View {
@Binding var brightnessAmount: Double
var body: some View {
HStack {
Text("亮度")
Slider(value: $brightnessAmount, in: 0...1,
minimumValueLabel: Image(systemName:
"sun.max.fill").imageScale(.small), maximumValueLabel:
Image(systemName: "sun.max.fill").imageScale(.large)) {
Text("")
}
}
}
}
```
+ WheelPickerStyle SegmentedPickerStyle
```
```
+ 動態顯示的 List / Form 欄位
+
```
struct ContentView: View {
@State private var buyPhone = true
@State private var selectPhone = "iPhone 11 Pro Max"
let phones = ["iPhone 11 Pro Max", "iPhone 11 Pro", "iPhone 11"]
var body: some View {
Form {
Toggle("開發 iOS App 要買 iPhone 嗎", isOn: $buyPhone)
if buyPhone {
VStack(alignment: .leading) {
Text("我要買")
Picker("買 iPhone", selection: $selectPhone) {
ForEach(phones, id: \.self) { (phone) in
Text(phone)
}
}
.pickerStyle(SegmentedPickerStyle())
}
}
}
}
}
```
+ sheet
```
struct ContentView: View {
@State private var showSecondPage = false
var body: some View {
Button("show second page") {
showSecondPage = true
}
.sheet(isPresented: $showSecondPage) {
SecondView(showSecondPage: self.
$showSecondPage)
}
}
}
struct SecondView: View {
@Binding var showSecondPage: Bool
var body: some View {
Button("close") {
showSecondPage = false
}
}
}
struct SecondView_Previews: PreviewProvider {
static var previews: some View {
SecondView(showSecondPage: .constant(true))
}
}
```
:::
> [color=#ed6f21]重要(在第九章CRUD App)
:::spoiler
[老師參考](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84%E8%A9%A6%E7%85%89-%E5%8B%87%E8%80%85%E7%9A%84-100-%E9%81%93-swift-ios-app-%E8%AC%8E%E9%A1%8C/90-%E4%BD%BF%E7%94%A8-swiftui-%E5%89%B5%E4%BD%9C-crud-%E7%B4%80%E9%8C%84app-2fcbf20088d2)
[學姊參考](https://medium.com/%E6%B5%B7%E5%A4%A7-ios-app-%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88/crud%E7%B4%80%E9%8C%84-%E6%99%82%E9%96%93%E7%9A%84%E6%94%AF%E9%85%8D%E8%80%85-244ecf8ce887)
+ 以 @Published 決定哪些 property 變化時要通知畫面更新
```
class LoversData: ObservableObject {
@Published var lovers = [Lover]()
}
宣告 lovers 時加上 @Published,
代表 lovers 有變化時會通知觀察 LoversData 的 view,
觀察 LoversData 的 view 將更新畫面
```
+ ToolbarItem
```
.toolbar(content: {
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: {
}, label: {
Image(systemName: "plus.circle.fill")
})
}
})
```
+ editor
```
struct LoverEditor: View {
@State private var name = ""
@State private var weight = 30
@State private var trueHeart = true
var body: some View {
NavigationView {
Form {
TextField("名字", text: $name)
Stepper("體重 \(weight)", value: $weight, in: 30...100)
Toggle("真心", isOn: $trueHeart)
}
.navigationBarTitle("Add new lover")
.toolbar(content: {
ToolbarItem {
Button("Save") {
}
}
})
}
}
}
```
宣告
:::
> [color=#ed6f21]算數(在第二章程式親密接觸不重要啦)
:::spoiler
https://drive.google.com/file/d/1JKODOKSRg_2XGmobLE6wOt1-5S8TGmfy/view
```
func addNumber(startNumber:Int, endNumber:Int) -> Int {
var sum = 0
sum = startNumber + endNumber
return sum
}
var sum1 = addNumber(startNumber:1, endNumber: 100)
var sum2 = addNumber(startNumber:200, endNumber: 300)
var sum3 = sum1 + sum2
```
因為 List 比較適合顯示內容，Form 比較適合呈現輸入的表單
:::
> [color=#ed6f21]圖(在第三章初體驗&繪圖不重要啦)
:::spoiler
https://drive.google.com/file/d/1ELMpwksl8EZji6mNIOSS3rE2KGEsq-Y7/view
```
struct ContentView: View {
var body: some View {
Image("Death on the Nile")
.resizable()
.scaledToFill()
.frame(width: 300, height: 300)
.background(Color.black)
.clipShape(Circle())
.shadow(radius: 10)
}
}
```
```
ZStack {
德國國旗 Path(CGRect(x: 10, y: 10, width: 200,
height: 50))
.fill(Color(red: 0, green: 0, blue: 0))
Path(CGRect(x: 10, y: 60, width: 200,
height: 50))
.fill(Color(red: 1, green: 0, blue: 0))
Path(CGRect(x: 10, y: 110, width: 200,
height: 50))
.fill(Color(red: 1, green: 1, blue: 0))
}
```
```
VStack {
Circle()
.frame(width: 200, height: 200)
Ellipse()
.frame(width: 200, height: 100)
Capsule()
.frame(width: 200, height: 100)
RoundedRectangle(cornerRadius: 30)
.frame(width: 200, height: 100)
}
```
```
struct ContentView: View {
var body: some View {
Path { (path) in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 20, y: 300))
path.addLine(to: CGPoint(x: 300, y: 300))
}
.fill(Color(red: 1, green: 0, blue: 0))
}
}
```
```
VStack {
Path(ellipseIn: CGRect(x: 10, y: 10, width: 100,
height: 100))
Path(ellipseIn: CGRect(x: 10, y: 130, width: 200,
height: 100))
Path(roundedRect: CGRect(x: 10, y: 260, width: 200,
height: 100), cornerRadius: 20)
}
```
```
//曲線
Path { (path) in
path.move(to: CGPoint(x: 157, y: 68))
path.addQuadCurve(to: CGPoint(x: 89, y: 56), control:
CGPoint(x: 139, y: 34))
path.addQuadCurve(to: CGPoint(x: 75, y: 56), control:
CGPoint(x: 82, y: 57))
path.addQuadCurve(to: CGPoint(x: 13, y: 66), control:
CGPoint(x: 35, y: 37))
path.addQuadCurve(to: CGPoint(x: 0, y: 109), control:
CGPoint(x: 0, y: 82))
path.addQuadCurve(to: CGPoint(x: 43, y: 197), control:
CGPoint(x: 1, y: 169))
}
.stroke()
```
```
struct ice: Shape {
func path(in rect: CGRect) -> Path {
Path{(path) in
path.move(to:CGPoint(x: 300, y: 124))
path.addLine(to:CGPoint(x: 270, y: 124))
path.addLine(to:CGPoint(x: 265, y: 154))
path.addLine(to:CGPoint(x: 295, y: 150))
path.addLine(to:CGPoint(x: 300, y: 124))
}
}
}
Group{
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 300, height: 450, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 300, height: 350, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 270, height: 300, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 200, height: 440, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 300, height: 350, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 370, height: 420, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 100, height: 490, alignment: .center)
ice().stroke(Color(red: 230/255, green: 230/255, blue: 230/255),lineWidth:6)
.frame(width: 100, height: 360, alignment: .center)
}
```
:::
> [color=#ed6f21]換頁(button)
:::spoiler
leading & trailing
- 語言順序為由左到右時,leading 為左,trailing
為右
top & bottom
- top 為從上，bottom置底
VStack:垂直
HStack:水平
HStack:重疊
```
struct ContentView: View {
var body: some View {
VStack(alignment: .leading, spacing: 50) {
Image("pic")
.resizable()
.scaledToFill()
.frame(width: 200.0, height: 100.0)
.clipped()
Text("我要一步一步學App")
.background(Color.yellow)
}
.frame(width: 400)
.background(Color.green)
}
}
```
NavigationView
```
NavigationView {
VStack {
NavigationLink(destination: RightPersonView()) {
Text("對的時間點")
}
Image(systemName: "clock")
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
}
.navigationTitle("那個人是你嗎")
}
```
tab
```
struct AppView: View {
var body: some View {
TabView {
SongList()
.tabItem {
Image(systemName: "music.house.fill")
Text("情歌")
}
ContentView()
.tabItem {
Image(systemName: "info.circle.fill")
Text("About")
}
.accentColor(.orange)
}
}
}
```
滑動分頁(各種聯結有利用 SwiftUI 的 PageTabViewStyle 實現分頁照片瀏覽
```
struct ContentView: View {
@State private var currentPage = 0
var body: some View {
VStack {
Text("哈利波特在第\(currentPage+1)頁")
TabView(selection: $currentPage) {
ForEach(1..<8) { (index) in
Image("harry\(index)")
.resizable()
.scaledToFit()
}
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
}
}
```
按按鈕分頁
```
struct ContentView: View {
@State private var currentPage = 0
var body: some View {
VStack {
Text("哈利波特在第\(currentPage+1)頁")
Button(action: {
currentPage = (currentPage + 1) % 7
}, label: {
Image(systemName: "arrow.right.circle.fill")
.resizable()
.frame(width: 40, height: 40)
})
TabView(selection: $currentPage) {
ForEach(1..<8) { (index) in
Image("harry\(index)")
.resizable()
.scaledToFit()
}
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
}
}
```
捲動的 scroll view預設上下捲動
```
struct DemoView: View {
var body: some View {
ScrollView {
Color.yellow
.frame(height: 200)
Color.yellow
.frame(height: 200)
Color.yellow
.frame(height: 200)
Color.yellow
.frame(height: 200)
Color.yellow
.frame(height: 200)
}
}
}
```
水平捲動
```
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
Image("peter0")
.resizable()
.scaledToFill()
.frame(width: 200)
.clipped()
Image("peter1")
.resizable()
.scaledToFill()
.frame(width: 200)
.clipped()
Image("peter2")
.resizable()
.scaledToFill()
.frame(width: 200)
.clipped()
}
.frame(height: 200)
.padding(.horizontal, 20)
}
```
+ sheet
```
struct ContentView: View {
@State private var showSecondPage = false
var body: some View {
Button("show second page") {
showSecondPage = true
}
.sheet(isPresented: $showSecondPage) {
SecondView(showSecondPage: self.
$showSecondPage)
}
}
}
將
```
:::
> [color=#ed6f21]list(在第四章畫面設計ex 圖的分布怎麼放&list)
:::spoiler
https://drive.google.com/file/d/1QntgNpR5XFK2frMxDESAZB540xaiUGpU/view
:::
> [color=#ed6f21]其他()
:::spoiler
多行捲動文字的 TextEditor
```
struct ContentView: View {
var body: some View {
TextEditor(text: .constant("""
摘一顆蘋果 等你從門前經過
送到你的手中幫你解渴
像夏天的可樂 像冬天的可可
你是對的時間對的角色
已經約定過 一起過下個週末
你的小小情緒對我來說
我也不知為何 傷口還沒癒合
你就這樣闖進我的心窩
"""
))
.accentColor(.clear)
.frame(width: 200, height: 200)
}
}
```
動畫(第五章)
```
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
if show {
Image("蒙娜麗莎")
.transition(.opacity)
}
}
.animation(.easeInOut(duration: 5))
.onAppear {
self.show = true
}
}
}
```
點選 button 出現 / 消失
```
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Button(show ? "hide" : "show") {
self.show.toggle()
}
if show {
Image("蒙娜麗莎")
.transition(.opacity)
} else {
Image("蒙娜麗莎")
.hidden()
}
}
.animation(.easeInOut(duration: 5))
}
}
圖片不顯示時依然佔著空間
```
[**?!**](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/%E7%B0%A1%E6%98%93%E8%AA%AA%E6%98%8Eswift-4-optional-7da19051e835)
[**?!2**](https://www.appcoda.com.tw/swift-optional-intro/)
?裝在盒子裡
!解包裝
??
:::
> [color=#ed6f21]考古
:::spoiler
:::
Google Drive
Gist
Clipboard
Sign in with Wallet
