Skip to content

Latest commit

 

History

History
593 lines (404 loc) · 12.5 KB

README_CN.md

File metadata and controls

593 lines (404 loc) · 12.5 KB

Build Status Swift Xcode Xcode MIT

本文参考 SwiftUI 官方示例 并将探索结果记录于此,希望能够对你有所帮助。

对于本文所述内容,默认你已有一定的基于 Swift 语言的开发经验,故不会详细的叙述每个细节;如果对 Swift 语法有疑问,可先学习 Swift 语法。

在了解和使用 SwiftUI 过程中,如果有疑问之处,可加入 SwiftUI QQ 交流群:816138215 ,共同交流。

English 📔

💻 SwiftUI 所需环境

  • macOS 15 Beta
  • Xcode 11.0 Beta
  • iOS 13.0 Beta

📄目录:

基础控件

布局

State and Data Flow 状态和数据流

手势

基础控件

Text

Text 用来展示一行或多行的文本内容,效果等同于 UILabel,但更加优秀。 如果要创建 Text, 只需通过 Text("SwiftUI") 即可创建; 采用链式语法,也可以为文本添加多项属性,如字体、颜色、阴影、上左下右的间距等。

示例:

Text("SwiftUI")
    .color(.orange)
    .bold()
    .font(.system(.largeTitle))
    .fontWeight(.medium)
    .italic()
    .shadow(color: .black, radius: 1, x: 0, y: 2)
查看运行效果

HStack 和 VStack 控件用于承载多个视图,在后面会提到。

TextField

TextField 用来添加普通的输入框,一般常用作文本输入。

示例:

TextField(self.$name, placeholder: self.nameText, onEditingChanged: { changed in
    print("onEditing: \(changed)")
}) {
    print("userName: \(self.name)")
    self.endEditing(true)
}}
.padding(10)
.frame(height: 50)
.textFieldStyle(.roundedBorder)
.padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
查看运行效果

SecureField

SecureField 一般作为密码输入时使用,使用方式与 TextField 并无差别,示例与运行效果同上 TextField

Image

Image 控件用于展示图片。

示例:

Image("icon")
    .resizable()
    .frame(width: Length(100),
           height: Length(100),
           alignment: .center)
查看运行效果

Button

Button 用于响应点击事件。

示例:

Button(action: {
    print("Tap")
}) {
   Text("I'm a Button")
}

PullDownButton

尚未发布

ItemBasedPopUpButton

尚未发布

NavigationButton

NavigationButtonPage 用以 Push 到下一个导航页面。

示例:

NavigationButton(destination: NavigationButtonPage()) {
    Text("NavigationButton").bold().color(.orange).font(.largeTitle)
    }.navigationBarItem(title: Text("Page"))
查看运行效果

PresentationButton

PresentationButton 用以弹出一个页面。

示例:

PresentationButton(PageRow(title: "PresentationButton", subTitle: "触发时显示内容的按钮控件"),
                   destination: Text("I'm Text")) {
                    print("Present 🦄")
                   }
查看运行效果

EditButton

EditButton 用以触发编辑状态,使用时只需在 navigationBarItems 设置即可。

示例:

navigationBarItems(trailing: EditButton())
查看运行效果

PasteButton

尚未发布

DatePicker

DatePicker 用于选择绝对日期的控件。

示例:

DatePicker(
    $server.date,
    minimumDate: Calendar.current.date(byAdding: .year,
                                       value: -1,
                                       to: server.date),
    maximumDate: Calendar.current.date(byAdding: .year,
                                       value: 1,
                                       to: server.date),
    displayedComponents: .date
)
查看运行效果

Toggle

Toggle 用于切换选中状态。

示例:

Toggle(isOn: $isOn) {
    Text("State: \(self.isOn == true ? "":"")")
}.padding(20)
查看运行效果

Slider

Slider 用于从有限值范围中选值的控件。

示例:

Slider(value: $data.rating)
查看运行效果

Stepper

Stepper 用以增加或减少数值。

示例:

Stepper(value: $value, step: 2, onEditingChanged: { c in
    print(c)
}) {
    Text("Stepper Value: \(self.value)")
    }.padding(50)
查看运行效果

SegmentedControl

SegmentedControl 用以分段条件选择。

示例:

SegmentedControl(selection: $currentIndex) {
    ForEach(0..<items.count) { index in
        Text(self.items[index]).tag(index)
    }
    }.tapAction {
        print("currentIndex: \(self.currentIndex)")
}
查看完整示例及运行效果

WebView

WebView 用于展示一个打开的网页。

示例:

struct WebViewPage : UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let req = URLRequest(url: URL(string: "https://www.apple.com")!)
        uiView.load(req)
    }
}
查看运行效果

Alert

Alert 用于展示一个弹框提醒,需要与点击事件关联起来。

示例:

presentation($showsAlert, alert: {
                Alert(title: Text("Hello"))
            })
查看运行效果

布局

HStack

HStack 用于将子视图排列在水平线上的视图。

示例:

HStack {
    Text("made in China.")
    Divider() // Just add a line.
    Text("the People's Republic Of China.")
}
查看运行效果

VStack

VStack 用于将子视图排列在垂直线上的视图。

示例:

VStack {
    Text("made in China.")
    Divider() // Just add a line.
    Text("the People's Republic Of China.")
}
查看运行效果

ZStack

ZStack 用于覆盖子视图,在两轴上对齐。

示例:

ZStack {
    Text("made in China.")
    Divider() // Just add a line.
    Text("the People's Republic Of China.")
}
查看运行效果

List

List 列表容器,用以显示一列数据。

示例:

List(0..<5) { item in
    Text("Hello World !")
}.navigationBarTitle(Text("List"), displayMode: .large)
查看运行效果

ScrollView

ScrollView 是一个滚动视图容器。

示例:

ScrollView {
    Text("SwiftUI").padding(20)
    Divider()
    Image("icon").resizable()
        .frame(width: 300, height: 300, alignment: .center)
    Divider()
    Text("Views and ... user interface.")
    }
    .border(style, width: 1,cornerRadius: 10)
    .padding(10)
    .navigationBarTitle(Text("ScrollView"))
查看运行效果

ForEach

ForEach 用于根据已有数据的集合展示视图。

示例:

let data = (0..<5).map { $0 }
var body: some View {
    ForEach(data) { e in
        Text("Hello \(e)")
            .bold()
            .font(.system(size: 25, design: .monospaced))
            .padding(5)
}
查看运行效果

📎 About

  • 以上示例中所涉及代码,皆在本仓库代码中,建议下载并运行查看。
  • 如果有关于 SwiftUI 更好的用法与建议,期待能够一起分享!
  • 如果本文示例内容有疏漏和错误之处,欢迎提 Issue

✉️ Contacts

email : [email protected]

微博 : @晋先森

📄 License

SwiftUI is released under the GPL-3.0 license. See LICENSE for details.