一、用视图模式修改文本
1、点到视图编辑模式

2、修改文本和文字颜色
- 1、按住control+command 点击视图上的文字
你好世界
- 2、选择第一个
Show SwiftUI

- 3、修改Label 回车和Color选red

二、用视图模式修改布局
1、按住ctrl 并点击编辑器上的Text调出菜单,点击 Embed in VStack
Text外边就会包裹一个VStack表示纵向布局,可以理解成包了一个div
swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Image("man")
.resizable()
.frame(width: 60, height: 60)
VStack {
Text("你好中国")
.font(.title)
.foregroundColor(Color.red)
}
}
.padding()
}
}
#Preview {
ContentView()
}
2、添加一个新的文本
1、光标放在如下文字,点击右上角的+号,选择Text(也可以用拖动的方式)
2、修改为左对齐
bash
1、编辑器上点击VStack
2、按住ctrl command 点击右边的视图会弹出编辑然后选择左边对其

三、用视图模式添加图片
创建新的文件img.swift
添加Image标签,cunfen是前面添加到图片名称
圆角图片
css
import SwiftUI
struct img: View {
var body: some View {
Image("fengjing")
.frame(width:200,height:200)
.clipShape(Circle())
.overlay {
Circle().stroke(.gray, lineWidth: 4)
}
.shadow(radius: 7)
}
}
#Preview {
img()
}
