美文网首页iOS
SwiftUI 组件

SwiftUI 组件

作者: 小凡凡520 | 来源:发表于2019-10-18 15:42 被阅读0次
    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()
    }
}

    相关文章

      网友评论

        本文标题：SwiftUI 组件

        本文链接：https://www.haomeiwen.com/subject/uanmmctx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        iOS

        关于我们|服务条款|联系我们|SwiftUI 组件|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！