SwiftUI-为视图添加组件

发表于 2025-06-23 分类于 SwiftUI学习本文字数： 621 阅读时长 ≈ 2 分钟

大致感受代码区域与画布区域的联系

画布预览模式

画布示例

红框部分为画布，可实时显示对视图的更改及定位组件代码

实时模式示例

仅显示代码区域对视图的更改

选择模式示例

当选择视图板块时，将在代码区域定位，如下图

画布定位示例

变体模式示例

由系统提供的亮色主题与深色主题预览

Tip
在下图红框部分设置以在其他模式预览深色主题

画布设备设置示例

例如在视图内插入一行文本，在body下书写

代码示例
struct ContentView: View {
    var body: some View {
            Text("Hello, world!")
    }
}

文本插入示例

例如在刚刚创建的文本下方插入一个按钮

首先换行至“文本”下方

换行示例

点击上图红框部分，或 control+shift+command 调出组件库菜单

组件库菜单示例

选中“按钮”后回车

按钮插入示例

例如选中文本组件对应的代码行，对其检查，红框部分为选中组件的属性

选中代码行示例

在检查器更改属性后将会在组件代码下方添加属性代码

代码示例
//例如设置font为标题样式
struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .font(.title)
    }
}

字体更改示例

每个组件有不同的属性，以下介绍几个常见修饰属性

Font
_{字体。本意强调文本的大小样式}

Weight
_{重量。本意强调文本的粗细及颜色深浅给予视觉的重量感}

Color
_{颜色。赋予文本颜色}

Alignment
_{排列。使文本“左对齐”或“居中对齐”或“右对齐”}

Line Limit
_{行限制。将长文本限制于规定行数内。需搭配.Frame使用}

即在组件填充空白，使其位于视图某个位置

设置宽度与高度以限制组件的大小