如何用SwiftUI实现类似Pages应用的设置样式？

问题分析 #

原代码依赖Form组件自带的系统样式，导致无法精准匹配 Pages 的圆角、边框、阴影等自定义视觉效果，且固定高度的frame会限制布局灵活性。以下是调整后的实现方案：

调整后代码 #

let sizes = ["500 MB", "1 GB", "3 GB"]
@Binding var dataSize: String

// macOS 平台可选：添加hover交互状态
// @State private var isHovering = false

var body: some View {
    HStack {
        Spacer()
        VStack(spacing: 8) {
            // 模拟Section标题样式
            Text("Data size")
                .font(.caption)
                .foregroundColor(.secondary)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.horizontal, 16)
            
            // 分段选择器
            Picker("Data size", selection: $dataSize) {
                ForEach(sizes, id: \.self) { size in
                    Text(size)
                }
            }
            .pickerStyle(.segmented)
            .padding(.horizontal, 16)
            .padding(.bottom, 16)
        }
        .frame(width: 300)
        .background(Color(.systemBackground))
        .cornerRadius(15)
        .overlay(
            RoundedRectangle(cornerRadius: 15)
                .stroke(Color(.separator), lineWidth: 0.5)
            // macOS hover效果可选：
            // .stroke(Color(.controlAccentColor).opacity(0.3), lineWidth: 1)
            // .opacity(isHovering ? 1 : 0)
        )
        .shadow(color: .black.opacity(0.1), radius: 10, x: 0, y: 2)
        // macOS hover效果可选：
        // .onHover { hovering in
        //     isHovering = hovering
        // }
        Spacer()
    }
    .padding(.horizontal)
}

关键修改说明 #

• 移除Form组件：避免系统默认分组样式、分隔线干扰自定义视觉效果，改用基础容器搭建结构
• 自定义标题样式：用Text模拟 Pages 的 Section 标题风格，适配系统明暗模式的文字颜色和字体
• 容器样式精细化：
  • 用Color(.systemBackground)设置系统统一背景色，自动适配明暗模式
  • 统一cornerRadius(15)替代自定义CustomShape，符合 Pages 的圆角规范
  • 添加细边框：通过overlay绘制线宽0.5的分隔色边框，还原 Pages 的边框质感
  • 优化阴影：设置低透明度黑色阴影，调整偏移量和半径，实现自然的视觉层次
• 布局优化：移除固定高度限制，让容器随内容自适应高度，同时添加内边距避免内容拥挤

内容的提问来源于stack exchange，提问作者tkantor81