SwiftUI 组件

VStack(布局)

// 垂直方向
struct CircleImage: View {
    
    var name:String = "2"
    
    var body: some View {
        VStack(alignment: .center, spacing: 0, content: {
            Text("11111111111111")
            Text("1")
            Text("1")
            Text("11111111111111")
        })
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage(name: "1")
    }
}

HStack(布局)

// 水平方向
struct CircleImage: View {
    
    var name:String = "2"
    
    var body: some View {
        HStack(alignment: .center, spacing: 20, content: {
            Text("11111111111111")
            Text("1")
            Text("1")
            Text("11111111111111")
        })
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage(name: "1")
    }
}

ZStack

// 重叠布局
struct CircleImage: View {
    
    var body: some View {
        ZStack {
            Text("test123456")
            Text("test2222assdfnsin")
        }
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Button

struct ButtonView: View {
    
    @State var isShow:Bool = false
    
    var body: some View {
        Button(action: {
            self.isShow = true
        }, label: {
            Text("点我")
        })
            .alert(isPresented: $isShow) { () -> Alert in
                Alert(title: Text("title"))
        }
    }
}

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        ButtonView()
    }
}

struct CircleImage: View {
        
    var body: some View {
        Button("点我") {
            print("test")
        }
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Text

struct TextView: View {
    
    @State var isShow:Bool = false
    
    var body: some View {
        Text("内容")
    }
}

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        TextView()
    }
}

TextFiled

struct TextFieldView: View {
    
    @State var name:String = ""
    
    var body: some View {
        TextField("default", text: $name, onEditingChanged: { (ret) in
            print(ret)
        }, onCommit: {
            
        })
    }
}

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldView()
    }
}

SecureField

struct PageView: View {
    
    @State var name:String = ""
    
    var body: some View {
        SecureField("test", text: $name)
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

Toggle

struct CircleImage: View {
    
    @State var isOn:Bool = false
    
    var body: some View {
        Toggle(isOn: $isOn, label: {
            Text("开启")
        })
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Rectangle

struct PageView: View {
    
    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100, alignment: .center)
            .foregroundColor(Color.red)
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

TabBar

struct PageView: View {
    
    var body: some View {
        TabView {
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
                }
        }
        .font(.headline)
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

Slider

struct CircleImage: View {
    
    @State var value:CGFloat = 0.5
    
    var body: some View {
        Slider(value: $value)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Image

struct ImageView: View {
    
    @State var name:String = ""
    
    var body: some View {
        // 从 Assets.xcassets 读取图片
        Image("2")
            .frame(width: 80, height: 80, alignment: .center)
            .clipShape(Circle())
        // 从项目中读取图片
        Image(systemName: "xx")
    }
}

struct ImageView_Previews: PreviewProvider {
    static var previews: some View {
        ImageView()
    }
}

struct CircleImage: View {
    
    var name:String = "2"
    
    var body: some View {
        Image(name).clipShape(Circle())
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage(name: "1")
    }
}

Group

struct CircleImage: View {
    
    var body: some View {
        Group {
            Text("test1")
            Text("test2")
        }
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Spacer

空格

Divider

线条

ScrollView

struct CircleImage: View {
    
    var body: some View {
        ScrollView {
            Text("test")
        }
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

struct OBJ:Codable,Hashable {
    
}

Picker

struct PageView: View {
    
    @State var selection = 0
    let colors = ["Red","Yellow","Green","Blue"]
    
    var body: some View {
        Picker(selection: $selection, label: Text("")) {
            ForEach(0 ..< colors.count) { index in
                Text(self.colors[index]).tag(index)
            }
        }
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

Stepper

struct PageView: View {
    
    @State var curValue = 0
    
    var body: some View {
        Stepper(value: $curValue,in: 0 ... 10, label: {
            Text("当前是: \(curValue)")
        })
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

DatePicker

struct CircleImage: View {
    
    @State var date: Date = Date()
    @Environment(\.editMode) var mode
    
    var body: some View {
        DatePicker(selection: $date,displayedComponents: .date, label: {
            Text("")
        })
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Form

struct PageView: View {
    
    @State var show:Bool = false
    
    var body: some View {
        NavigationView {
            Form {
                Section(
                    header: Text("1")) {
                        Text("123")
                }
                Section(header: Text("2")) {
                    Button(action: {
                        self.show = true
                    }, label: {
                        Text("点我2")
                    }).alert(isPresented: $show) { () -> Alert in
                        Alert(title: Text("hello world"))
                    }
                }
                Section(header: Text("1")) {
                    Text("123")
                }
            }
        }
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

点击与手势

struct PageView: View {
    
    var body: some View {
          // 点击
        Text("点我").onTapGesture(count: 2, perform: {
            print("test")
        })
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

struct PageView: View {
    
    var body: some View {
        Text("点我")
        .gesture(
          // 点击
            TapGesture()
                .onEnded({ () in
                    print("test")
                })
        )
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

struct PageView: View {
    
    var body: some View {
        Text("点我")
        .gesture(
          // 拖拽
            DragGesture()
                .onEnded({ (_) in
                    print("test")
                })
        )
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

struct PageView: View {
    
    var body: some View {
        Text("点我")
        .gesture(
            // 长按
            LongPressGesture()
                .onEnded({ (ret) in
                    print("test")
                })
        )
    }
}

struct PageView_Preview: PreviewProvider {
    
    static var previews: some View {
        PageView()
    }
}

复合组件

struct CircleImage: View {
    
    @State private var showDetail = false
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0, content: {
            ScrollView(.vertical, showsIndicators: false) {
                Text("test")
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        Image("2")
                        Image("2")
                        Image("2")
                        Image("2")
                    }
                }
                Text("test")
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        Image("2")
                        Image("2")
                        Image("2")
                        Image("2")
                    }
                }
                Text("test")
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        Image("2")
                        Image("2")
                        Image("2")
                        Image("2")
                    }
                }
                Text("test")
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        Image("2")
                        Image("2")
                        Image("2")
                        Image("2")
                    }
                }
            }
        })
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}