SwiftUI (三) Button Label

Button

顺序不能乱，效果会不对。frame 尺寸 → 背景 → 裁剪圆角

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {

            Button {
                print("点击了按钮")
            } label: {
                // 这里不能指定大小
                Text("hello").background(.red).foregroundColor(.green)
            }.frame(width: 100, height: 90).background(.blue)

            // 1. 默认边框样式（.bordered）
            Button("bordered") {}
                .buttonStyle(.bordered)

            // 2. 边框浅色
            Button("borderedProminent") {}
                .buttonStyle(.borderedProminent)

            // 3. 纯文本样式（无边框，仅文字变色）
            Button("plain") {}
                .buttonStyle(.plain)

            // 4. 胶囊边框（适合小按钮）
            Button("borderless") {}
                .buttonStyle(.borderless)

            // 自定义圆角
            // 顺序不能乱，效果会不对。frame 尺寸 → 背景 → 裁剪圆角 → 按钮样式
            Button("自定义圆角") {}  // 必须加，清除系统默认边距
                .frame(width: 100, height: 80)
                .background(.green)
                .clipShape(
                    RoundedRectangle(cornerRadius: 12.0, style: .continuous)
                )
                .buttonStyle(.plain)

        }

    }
}

#Preview {
    ContentView()
}

Label

带图标和文字。也可以图标和其它的组件配合显示

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // 带图标和文字
            Label("设置", systemImage: "gear")
                .font(.title2)
                .foregroundColor(.gray)

            Label {
                Button("hello") {}
            } icon: {
                Image(systemName: "gear")
            }

            Label("相机", systemImage: "camera")
                .labelStyle(.iconOnly)
            Label("相册", systemImage: "photo")
                .labelStyle(.titleOnly)
            // 默认
            Label("消息", systemImage: "message")
                .labelStyle(.titleAndIcon)

        }

    }
}

#Preview {
    ContentView()
}