SwiftUI基础篇---笔记

swiftUI beta出来有一阵子了，期间更新过多个版本，beta4的说话有开始做一些笔记和demo，但是后续版本改动，所以导致之前的demo报错太多（很多方法、关键字的修改，删除等），这次重新记录一下自己的熟悉过程

输入图片说明

HStack - 水平布局全称 HorizontalStack

alignment: top、bottom、center、firstTextBaseline、lastTextBaseline。水平布局对齐设置
spacing: 两组件之间的水平距离

用法如下:

    HStack(alignment: .top, spacing: 15, content: {
        
        Image("1")
        .resizable()
            .frame(width: 60, height: 60)
            .scaledToFit()
        
        Image("2")
        .resizable()
        .frame(width: 60, height: 30)
        .scaledToFit()
        
        Image("3")
        .resizable()
        .frame(width: 60, height: 45)
        .scaledToFit()
        }
    )

    HStack {
        
        Image("1")
        .resizable()
            .frame(width: 60, height: 60)
            .scaledToFit()
        
        Image("2")
        .resizable()
        .frame(width: 60, height: 30)
        .scaledToFit()
        
        Image("3")
        .resizable()
        .frame(width: 60, height: 45)
        .scaledToFit()
    }

效果如下:

VStack - 垂直布局，全称VerticalStack

输入图片说明

（相关属性和HStack大致一样）
alignment属性有：leading、center、trailing

ZStack - 重叠布局

输入图片说明

（相关属性和HStack大致一样）
aignment属性较多：center、leading、trailing、top、bottom、center、topLeading、topTrailing、bottomLeading、bottomTrailing

EditButton

先看效果图再看代码

    @State private var users = ["Jack Ma", "Kube", "Jodarn", "Jay"]
    var body: some View {
        List {
            ForEach(users, id: \.self) { user in
                Text(user)
            }
            .onDelete(perform: delete(at:))
            .onMove(perform: move(form:to:))
        }
        .navigationBarItems(trailing:
            EditButton()
        )
    }
    
    func delete(at offsets: IndexSet) {
        users.remove(atOffsets: offsets)
    }
    
    func move(form source: IndexSet, to destination: Int) {
        users.move(fromOffsets: source, toOffset: destination)
    }

代码很简单对不对，这个确实比我们常用的类似UITableView这种控件简洁很多，自定义删除方法、移动方法

Form表单

好不好用了才知道~
这里主要提一下Form表单的几种类型：SegmentedPickerStyle、DefaultPickerStyle、WheelPickerStyle

看效果图再看代码

@State private var enableLogging: Bool = false
    @State private var selectColor = 0
    @State private var colors: [String] = ["Red", "Yellow", "Blue", "White", "Black"]
    @State private var selectGrade = 0
    @State private var grades: [String] = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"]
    @State private var selectSex = 0
    @State private var sexs: [String] = ["boy", "girl", "secret"]
    
    @State private var showingAdvancedOptions = false
    
    var body: some View {
        /// 1.表单功能
        /// 2.常用的几种表单选择类型:SegmentedPickerStyle、DefaultPickerStyle、WheelPickerStyle
        VStack {
            
            Toggle(isOn: $showingAdvancedOptions) {
                Text("打开更多")
            }
            
            if showingAdvancedOptions {
                Toggle(isOn: $enableLogging) {
                    Text("楼上打开了")
                }
            }
            
            Form {
                Picker(selection: $selectColor, label: Text("选择你喜欢的颜色")) {
                    ForEach(0..<colors.count) {index in
                        Text(self.colors[index])
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
            }
            
            Form {
                Picker(selection: $selectGrade, label: Text("选择你的年级")) {
                    ForEach(0..<grades.count) {index in
                        Text(self.grades[index])
                    }
                }
            }.pickerStyle(DefaultPickerStyle())

            Form {
                Picker(selection: $selectSex, label: Text("选择你的性别")) {
                    ForEach(0..<sexs.count) {index in
                        Text(self.sexs[index])
                    }
                }
            }.pickerStyle(WheelPickerStyle())
        }
        .padding()
    }

DatePicker 时间选择器

类似Picker的用法

Group

我们先来看一下苹果官方

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension ViewBuilder {

    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View, C6 : View, C7 : View, C8 : View, C9 : View
}

苹果官方在相对的一个布局视图里，只支持创建10个组件组合(超过10个编译错误)
所以Group的用法之一就是，规范组件组合

如下:

var body: some View {
    /// 为了规范布局~苹果爸爸不让ViewBuilder 超过10个，编译报错
    /// 所以这个时候可以选择Group来包含组件
    VStack {
        Group {
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Text("5")
            Text("6")
            Text("7")
            Text("8")
            Text("9")
            Text("10")
//                Text("11")
        }
        Group {
            Text("11")
            Text("12")
            Text("13")
            Text("14")
            Text("15")
            Text("16")
            Text("17")
            Text("18")
        }
    }
    
}

List -- 类似UITableView 和 Section -- 白话文理解含义：部分

List设置listStyle属性可以类似于UITableView的grouped和prain
Section包含有footer、header属性

ScrollView

输入图片说明

创建属性有：axes（声明水平滚动还是垂直滚动）showsIndicators(是否显示滚动条)

效果如下：代码展示：

    var body: some View {
        
        VStack {
            ScrollView(.horizontal, showsIndicators: true) {
                
                HStack {
                    Image("1")
                    .resizable()
                    .frame(width: 80, height: 80)


                    Image("2")
                    .resizable()
                    .frame(width: 80, height: 80)


                    Image("3")
                    .resizable()
                    .frame(width: 80, height: 80)


                    Image("4")
                    .resizable()
                    .frame(width: 80, height: 80)


                    Image("5")
                    .resizable()
                    .frame(width: 80, height: 80)
                }
            }
            
            ScrollView(.vertical, showsIndicators: true) {
                
                VStack {
                    Image("6")
                    .resizable()
                    .frame(width: 120, height: 120)


                    Image("7")
                    .resizable()
                    .frame(width: 120, height: 120)


                    Image("8")
                    .resizable()
                    .frame(width: 120, height: 120)


                    Image("9")
                    .resizable()
                    .frame(width: 120, height: 120)


                    Image("10")
                    .resizable()
                    .frame(width: 120, height: 120)
                }
            }
        }
    }

SecureField 隐文输入框

效果图如下代码如下

    @State private var password: String = ""

    var body: some View {
        VStack {
            SecureField("输入你的密码", text: $password)
        
            Text("你的密码是\(password)")
        }
        .padding()
    }

TabView 类似UITabbarController

输入图片说明

    @State private var selectIndex = 0
    
    var body: some View {
        TabView(selection: $selectIndex) {
            Text("\(self.selectIndex)")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("1")
                }.tag(0)
            Text("\(self.selectIndex)")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("2")
                }.tag(1)
        }
    }

SliderView 滑尺视图

可以设置范围、间隔数、监听滑动时的方法等

    @State private var value: Double = 0
    var body: some View {
        VStack {
            Slider(value: $value, in: 0...100, step: 10)
            Text("\(value)")
        }
        .padding()
    }

菜鸟历险记丶 / SwiftUI-CTao

SwiftUI基础篇---笔记

HStack - 水平布局全称 HorizontalStack

VStack - 垂直布局，全称VerticalStack

ZStack - 重叠布局

EditButton

Form表单

DatePicker 时间选择器

Group

List -- 类似UITableView 和 Section -- 白话文理解含义：部分

ScrollView

SecureField 隐文输入框

TabView 类似UITabbarController

SliderView 滑尺视图

简介

发行版

贡献者

近期动态

菜鸟历险记丶 / SwiftUI-CTao .gitee-modal { width: 500px !important; }

SwiftUI基础篇---笔记

HStack - 水平布局 全称 HorizontalStack

VStack - 垂直布局，全称VerticalStack

ZStack - 重叠布局

EditButton

Form表单

DatePicker 时间选择器

Group

List -- 类似UITableView 和 Section -- 白话文理解含义：部分

ScrollView

SecureField 隐文输入框

TabView 类似UITabbarController

SliderView 滑尺视图

简介

发行版

贡献者

近期动态

搜索帮助

菜鸟历险记丶 / SwiftUI-CTao

HStack - 水平布局全称 HorizontalStack