SwiftUI(2) View Layout&Presentation

参考

官方文档
Jinxiansen的Github

栈

1. HStack

水平方式排列子view

2.VStack

垂直方式排列子View

3.ZStack

在Z轴上重叠覆盖

//可以通过zIndex设置次序
ZStack{
	Text("text").zIndex(1)
	Button("btn"){}.zIndex(0)
}

列表和滚动视图

1.List

列表 unFinished

//初始化
List() {
	Text("1")
	Text("2")
	Text("3")
}

2.ForEach

循环生成View

VStack{
ForEach(0..<names.count) {index in
	Text("\(self.names[index])")
	}
}

3. ScrollView

滚动视图容器

ScrollView{

}

容器

1. Form

表单

Form{
                Text("hello")
                Text("hello")
                Button("btn"){}
            }

2. Group

集合多个view，对Group设置的样式作用于子View

VStack{
            Group {
                Text("Hello World !")
                Text("Hello World !")
            }.font(Font.system(size: 20)).frame(width: 200, height: 100, alignment: .center)
        }

3. Section

设置header和footer，结合List使用

Section(header: Text("header"), footer: Text("footer")) {
                List{
                    Text("hello")
                    Text("hello")
                    Button("btn"){}
                }
            }

空白和分割线

1.空白

//用空白撑开剩余的空间
Spacer()

2.分割线

Divider()

架构视图

1. NavigationView

NavigationView{
	VStack{
	}.navigationBarTitle//属性需要设置到NavigationView的子View
}
//属性
.navigationBarTitle("Title", displayMode: NavigationBarItem.TitleDisplayMode.inline)//inline为标题在最上方居中，和导航栏在一行,large为在导航栏下面一行
.navigationBarBackButtonHidden(true)//是否隐藏返回按钮
.navigationBarHidden(false)//是否隐藏导航栏
.navigationBarItems(leading: Text("leading"), trailing: Text("Trailing"))//设置导航栏左边和右边的View

2.TabView

TabView {
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }
        }

弹窗

1. Alert

let alertView = Alert(title: Text("Title"), message: Text("message"), primaryButton: Alert.Button.destructive(Text("有危险的操作"), action: {
        print("tap destructive")
    }), secondaryButton: Alert.Button.cancel(Text("取消"), action: {
        print("tap 取消")
    }))
    var body: some View {
        Button("alert"){
            print("tap")
            self.showAlert = true
        }.alert(isPresented: $showAlert, content: {alertView})
    }

2.ActionSheet

弹出选择框

let actionSheetView = ActionSheet(title: Text("Title"), message: Text("Message"), buttons: [.default(Text("default"), action: {
        print("tap default")
    }),.cancel(Text("cancel"), action: {
        print("tap cancel")
    }),.destructive(Text("destructive"), action: {
        print("tap destructive")
    })])

Button("alert"){
            print("tap")
//            self.showAlert = true
            self.showActionSheet = true
        }.alert(isPresented: $showAlert, content: {alertView})
            .actionSheet(isPresented: $showActionSheet, content: {self.actionSheetView})