swiftUI笔记之Shapes实践Stacks

发表于 更新于 阅读次数： 阅读次数：

基础

Circle

Circle 方法允许您绘制完美的圆形。圆形的直径等于宽度和高度之间较小的数字

1
2
3
Circle()
    .stroke(Color.black, lineWidth: 2)
    .frame(width: 44, height: 44)

Ellipse

Ellipse 就像一个圆，但没有完美的纵横比 1:1。当宽度和高度不同时，它会填满空间并扭曲自己。
Ellipse()
.stroke(Color.black, lineWidth: 2)
.frame(width: 44, height: 88)

Rectangle

虽然 SwiftUI 中的大多数元素（例如 stacks 堆栈、颜色、渐变）都以矩形的形式，但它们不是形状。 Rectangle 具有 shape 属性，你可以进行描边或用作蒙版的用途。

1
2
3
Rectangle()
    .foregroundColor(.blue)
    .ignoresSafeArea()

RoundedRectangle

RoundedRectangle（圆角矩形） 有 cornerRadius（圆角） 和 style（样式）属性。它非常适合创建按钮、卡片，看起来更美观和圆滑。

1
2
3
4
RoundedRectangle(cornerRadius: 30, style: .continuous)
    .fill(Color.green)
    .frame(height: 44)
    .overlay(Text("Sign up").bold())

Capsule

与 RoundedRectangle 类似，Capsule 类似胶囊的形状。胶囊的每一端都由一个半圆组成。您可以将它们用于按钮的绘制。

1
2
3
4
Capsule()
    .fill(Color.green)
    .frame(height: 44)
    .overlay(Text("Sign up").bold())

实践

xPCQdD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue).ignoresSafeArea()

            VStack {
                Circle()
                    .stroke(Color.black, lineWidth: 2)
                    .frame(width: 44, height: 44)
                Text("Hong jun yao").foregroundColor(Color.red).bold()
                Capsule()
                    .foregroundColor(Color.green)
                    .frame(height: 44)
                    .overlay(Text("Sign up"))
            }
            .padding()
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
            .padding()
        }
        .frame(width: 300.0, height: 500.0)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}