样式

形状

Color.red // 色块
Rectangle() // 矩形
Circle() // 圆形
Ellipse() // 椭圆
Capsule() // 胶囊体
RoundedRectangle(cornerRadius: 20) // 指定圆角矩形
UnevenRoundedRectangle(cornerRadii: RectangleCornerRadii(topLeading: 20)) // 左上角圆角矩形

样式	说明
.fill(.green)	填充色
.strokeBorder(.blue, lineWidth: 20)	边框色
.strokeBorder(.orange,style: StrokeStyle(lineWidth: 20))	边框色
.trim(from: 0.1, to: 0.9)	裁切
.size(CGSize(width: 10, height: 10))	设置大小
.scale(2)	缩放大小
.rotation(.degrees(30))	旋转
.offset(CGSize(width: 30.0, height: 10.0))	偏移

渐变

线性渐变

LinearGradient(colors: [.red, .blue], startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1))

径向渐变

RadialGradient(colors: [.red, .green], center: UnitPoint(x: 0.5, y: 0.5), startRadius: 0, endRadius: 200)

椭圆渐变

EllipticalGradient(colors: [Color.blue, Color.green])

角度渐变

AngularGradient(colors: [.red,.yellow], center: UnitPoint(x: 0.5, y: 0.5))

矩形填充渐变

Rectangle()
    .fill(EllipticalGradient(colors: [Color.blue, Color.green]))

Padding 边距

样式

样式	说明
.padding(.trailing)	右侧
.padding(.leading)	左侧
.padding(.top)	上
.padding(.bottom)	下
.padding(.horizontal)	水平的（左右）
.padding(.vertical)	垂直的（上下）
.padding(.all)	四周

例子

上面和左侧的边距

Text("Hello, World!")
    .padding([.top, .leading], 30)
    .background(.red)

Frame 宽高

可以设置元素的宽高，alignment 参数可以设置对齐方式，可以设置上下左右和对角的位置

除了宽高，还有最小宽度、理想宽度、最大宽度

.frame(minWidth: 10,idealWidth: 100, maxWidth: .infinity)

overlay 前景色

overlay 可设置前景色

Image(systemName: "heart")
    .font(.largeTitle)
    .padding()
    .foregroundColor(.white)
    .bold()
    // 设置背景
    .background() {
        Circle()
            .fill(.pink)
    }
    .shadow(radius: 5)
    // 设置前景
    .overlay(alignment: .bottomTrailing){
        Circle()
            .fill(.green)
            .frame(width: 25,height: 25)
    }
    // 设置前景
    .overlay(alignment: .bottomTrailing) {
        Text("\(num)")
            .foregroundStyle(.white)
            .frame(width: 25,height: 25)
    }