iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
Mobile Development

SwiftUI快速入門30天系列 第 11

Day11 - Form 和 Section,建立表格和分組

  • 分享至 

  • xImage
  •  

為了讓兩個範例程式碼都能在 Xcode 中預覽,我們需要為每個範例分別加入 PreviewProvider。這樣做可以幫助我們在開發過程中即時查看介面效果。以下是兩個範例分別加入預覽的完整程式碼:

範例一:基本 Form

import SwiftUI

struct ContentView: View {
    @State private var username: String = ""
    @State private var notificationsEnabled: Bool = false

    var body: some View {
        Form {
            TextField("使用者名稱", text: $username)
            Toggle("接收通知", isOn: $notificationsEnabled)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

https://ithelp.ithome.com.tw/upload/images/20240825/201121004scdhx81BF.png

範例二:使用 Section 分組

import SwiftUI

struct SectionedFormView: View {
    @State private var username: String = ""
    @State private var notificationsEnabled: Bool = false

    var body: some View {
        Form {
            Section(header: Text("個人資料")) {
                TextField("使用者名稱", text: $username)
            }
            
            Section(header: Text("設定")) {
                Toggle("接收通知", isOn: $notificationsEnabled)
            }
        }
    }
}

struct SectionedFormView_Previews: PreviewProvider {
    static var previews: some View {
        SectionedFormView()
    }
}

https://ithelp.ithome.com.tw/upload/images/20240825/20112100W0H0woQcSZ.png


上一篇
Day10 - 資料大多超出螢幕怎辦?二個法寶ScrollView與LazyVStack
下一篇
Day12 - Alert 和 Sheet,顯示提示框和彈出視窗
系列文
SwiftUI快速入門30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言