1. 以并排的方式显示视图(名称:水平堆栈)
代码:HStack{ }
方法:将想要显示的内容写入{}内
2. 以垂直的方式显示视图(名称:垂直堆栈)
代码:VStack{}
方法:将想要显示的内容写入{}内
Q&A:HStack 和VStack 中是否可以互相嵌套?
答:Yes。
3. 添加文字
代码:Text("")
方法:将想要显示的文字写入" "内
完整示例:
Text("Hello, apple.")
附:
1)如何更改文字大小?
在Text("")的下一行
写入:.font()
方法:()内可以选择字体大小
完整示例:
Text("Friend")
.font(.largeTitle)
Text("银河")
.font(.caption)
4. 添加图片
代码: Image("")
方法: 将想要显示的图片写入" "内
示例:
Image("FriendAndGem")
附:
1)如何使图片的大小能够更改?
在Image("")的下一行
写入: .resizable()
完整示例:
Image("FriendAndGem")
.resizable()
⚠️注意:这一步并非直接改动图片的大小,只是使图片的大小能够被改动。
2)如何使图片填充整个屏幕?
在.resizable()的下一行
写入:.scaledToFull()
完整示例:
Image("FriendAndGem")
.resizable()
.scaledToFull()
3)如何使图片的大小刚好适合屏幕?
在.resizable()的下一行
写入:.scaledToFit()
完整示例:
Image("FriendAndGem")
.resizable()
.scaledToFit()
⚠️注意:视图部分写在body{} 内,此{ }部分并不作数据处理,变量声明等工作。仅显示视图。
视图部分完整示例:
struct FriendDetailView: View {
var body: some View {
VStack {
HStack{
Image("Friend")
.resizable()
.scaledToFit()
Text("Friend")
.font(.largeTitle)
Text("银河")
.font(.caption)
}
}
}
}