Text的基本用法
struct TextView: View {
var body: some View {
Text("Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World")
// 设置文字大小
.font(.title)
// 设置文字粗细
.fontWeight(.heavy)
// 设置文字下划线
.underline(true,pattern: .dot,color: .red)
// 设置文字斜体
.italic(true)
// 设置文字中横线
.strikethrough(true,color: .green)
// 设置文字大小，样式，粗细
.font(.system(.title2,design: .monospaced,weight: .medium))
// 多行文字居左显示
.multilineTextAlignment(.leading)
// 单个字符的间距
.kerning(5)
// 文字的颜色
.foregroundColor(.pink)
// 布局范围
.frame(width: 200,height: 200,alignment: .leading)
// 文字在布局范围内自适应
.minimumScaleFactor(0.1)
}
}
形状的基本用法
struct ShapeView: View {
var body: some View {
// 圆形
// Circle()
// 椭圆形
// Ellipse()
// 按钮形状
// Capsule(style: .continuous)
// 矩形
// Rectangle()
// 矩形 设置圆角 20
RoundedRectangle(cornerRadius: 20)
// 设置颜色
// .fill(.red)
// .foregroundColor(.pink)
// 边框宽为5
// .stroke(.blue,lineWidth: 5)
// 边框样式 由20个虚线组成的圆
// .stroke(.green, style: StrokeStyle(lineWidth: 10,lineCap: .butt,lineJoin: .bevel,dash: [20]))
// 半圆 大半圆
// .trim(from: 0.2,to: 0.8)
// .stroke(.blue,lineWidth: 5)
.frame(width: 200,height: 100)
}
}
渐变色
RoundedRectangle(cornerRadius: 20)
.fill(
// 线性渐变
// LinearGradient(colors: [.red,.blue], startPoint: .leading, endPoint: .trailing)
// 发散性渐变
// RadialGradient(gradient: Gradient(colors: [.red,.blue]), center: .center, startRadius: 100, endRadius: 300)
// 角度性渐变
AngularGradient(colors: [.red,.blue], center: .leading, startAngle: .degrees(0), endAngle: .degrees(300))
)
.frame(width: 300,height: 200)
图片设置
Image("qidongtu")
// .renderingMode(.template)
// 图片原尺寸
.resizable()
// 图片宽高比 和 展示形式
// .aspectRatio(1.5, contentMode: .fill)
// 适应图片尺寸
.scaledToFit()
// 范围撑满
// .scaledToFill()
.frame(width: 100,height: 100)
// 当设置图片 renderingMode(.template) 时 可以修改图片的颜色
// .foregroundColor(.red)
// 图片裁剪
.clipped()
