实战：创建一个复杂的设置界面 (Grid)

构建设置界面的基础

使用 Grid 布局来构建复杂的设置界面是 SwiftUI 的一大亮点。它提供了强大的对齐和布局控制。你可以轻松地创建出专业且用户友好的界面。想象一下，一个拥有多种开关、滑块和文本输入的设置页面，Grid 都能完美驾驭。

首先，你需要定义你的网格结构。这包括行和列的布局。例如，一个典型的设置项可能包含一个标题和一个控制组件。

Grid {
    GridRow {
        Text("Wi-Fi")
        Toggle(isOn: .constant(true)) { }
    }
    GridRow {
        Text("蓝牙")
        Toggle(isOn: .constant(false)) { }
    }
}

增强视觉对齐与间距

Grid 的强大之处在于其自动对齐能力。所有 GridRow 中的元素都会根据其在列中的位置自动对齐。这极大地简化了布局工作。你不再需要手动调整每个视图的间距。

你可以使用 alignmentGuide 或 fixedSize 来微调对齐。例如，你可以让所有标签文本左对齐，而控制组件右对齐。这使得界面看起来非常整洁。

• 对齐选项:
  • .leading
  • .trailing
  • .center
• 间距控制:
  • spacing() 修饰符可以应用于 Grid 或 GridRow。
  • 你可以为行和列设置不同的间距值。

添加多列和嵌套结构

Grid 不仅支持简单的两列布局。你还可以创建多列布局，甚至在 Grid 内部嵌套 Grid。这对于构建更复杂的设置分组非常有用。例如，一个“通用”设置部分可能包含多个子选项。

你可以使用 GridRow 中的多个视图来创建多列。每个视图都会占据一列。如果你需要一个视图跨越多列，可以使用 .gridCellColumns() 修饰符。

Grid {
    GridRow {
        Text("显示与亮度")
            .gridCellColumns(2) // 跨越两列
    }
    GridRow {
        Text("自动锁定")
        Text("30 秒")
    }
}

动态生成设置项

在实际应用中，设置项通常是动态生成的。你可以使用 ForEach 结合 GridRow 来实现这一点。这使得你的设置界面更具可扩展性。当你的设置选项发生变化时，你无需修改大量的 UI 代码。

例如，你可以从一个数据模型中读取设置项。然后，使用 ForEach 遍历这些数据。为每个数据项创建一个 GridRow。这种方法非常高效。它能让你轻松管理大量的设置选项。 🚀

struct SettingItem: Identifiable {
    let id = UUID()
    let name: String
    var isOn: Bool
}

@State private var settings = [
    SettingItem(name: "通知", isOn: true),
    SettingItem(name: "声音", isOn: false)
]

Grid {
    ForEach($settings) { $item in
        GridRow {
            Text(item.name)
            Toggle(isOn: $item.isOn) { }
        }
    }
}