SwiftUI-3 保持内置视图的自适应大小-Toy模板网

这篇具有很好参考价值的文章主要介绍了SwiftUI-3 保持内置视图的自适应大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Keep your app’s view layouts fluid on any device for each type of content your app displays.

在任何设备上，针对应用程序显示的每种内容，保持应用程序的视图布局流畅。

Text and symbols

在定义应用程序布局时，文本（Text）和符号（Symbols）在向人们传达信息方面起着核心作用，比如在导航链接、按钮标签和表格等方面。显示信息或标记其它元素的文本和符号需要有足够的空间来显示其内容。

Text

Text（文本）视图显示只读文本，它的内容可以是一个短字符串（Short String），也可以显示更长的字符串（Longer String）。

在布局（Layout）中声明Text View时，使用Font属性为系统提供有关文本的语意信息，而由系统选择字体和大小，例如，系统会设置具有标题（Title）字体的文本比具有正文（body）或说明（caption）字体的文本更突出。

// “Hamlet”显示将比“by William Shakespeare”更突出
Text("Hamlet")
    .font(.largeTitle)
Text("by William Shakespeare")
    .font(.caption)
    .italic()

文本视图可以通过换行或截断来调整某些空间限制，单不会更改字体大小以适应其理想大小小于或大于可用空间的情况。

For more information about localization, see Preparing Views for Localization. For guidance about supporting Dynamic Type, see Applying Custom Fonts to Text.

关于本地化的更多信息，请参见本地化标准视图。有关支持动态文字的指南，请参阅将自定义字体应用于文本。

Symbols

符号（Symbols），就像SF Symbols提供的图标，可以表示常见的应用程序功能，例如文件夹、收藏夹的心形或访问相机的相机图标。有效的符号简化了应用程序的用户界面，并且很容易被使用你的应用程序的人识别。您可以使用SwiftUI中提供的标准视图修改器来自定义它们的颜色和大小。即使您在Image中指定了系统或自定义元件，也可以将SF Symbols元件视为文本。要调整符合的大小和粗细，请指定[Font](Apple Developer Documentation，就像您在Text中做的那样。

// 示例使用HStack创建一行三个图像视图，这些视图显示SF元件中的图标
HStack {
    Image(systemName: "folder.badge.plus")    // 带加号的文件夹
    Image(systemName: "heart.circle.fill")    // 圆形包含的心形
    Image(systemName: "alarm")                // 闹钟
}
.symbolRenderingMode(.multicolor)             // 符号渲染模式
.font(.largeTitle)                            // 字体

Labels

要同时使用文本和符号来表示应用程序中的单个元素，可以使用Label。标签负责匹配其标题和图标大小及其对齐方式。

// 示例定义了一个标签，将图书的SF符号和文本组合在一起
Label("Favorite Books", systemImage: "books.vertical")
    .labelStyle(.titleAndIcon)    // 标签风格为显示标题和图标
    .font(.largeTitle)            // 字体设置为largeTitle

Controls

用于和用户进行交互的视图应具有离散的大小，以便在同一类型的多个元素一起显示时保持一致性。Controls（控件）也需要足够大，以便人们可以准确的点击或轻按。可以使用View Modifiers（视图修改器）来选择对应的尺寸。例如可以使用controlSize(_:)来使控件变小或变大，也可以使用progressViewStyle(_:)修饰符来为进度条选择线性或圆形外观。

// 示例显示具有不同controlSize值的Picker和Buton
VStack {
    HStack {
        Picker("Choice", selection: $choice) {
            choiceList()
        }
        Button("OK") {
            applyChanges()
        }
    }
    .controlSize(.mini)
    HStack {
        Picker("Choice", selection: $choice) {
            choiceList()
        }
        Button("OK") {
            applyChanges()
        }
    }
    .controlSize(.large)
}

除了Menu和Link这样的通用控件，还有像EditButton和ColorPicker这样的专用视图。建议使用这些视图来提供熟悉的UI元素，而不是创建需要维护的自定义控件。要浏览这些内置视图的更多内容，请参见Controls and Indicators。

Images and shapes

Graphical elements, such as images and shapes, can add a level of visual enhancement for your app.

图形元素，如图像和形状，可以为您的应用程序添加一定程度的视觉增强。

Images

Image用于显示照片和其它丰富的图形。默认情况喜爱，图像以资源的原始大小显示。可以使用resizable(capInsets:resizingMode:)、scaledToFit()或scaledToFill()之类的修改器以将图像缩放到可用空间。

Image("Yellow_Daisy")
    .resizable()
    .scaledToFit()

如果是从服务器访问图片资源，可以使用AsyncImage来处理下载，并同时保持应用程序的响应。

有关Image的详细信息，请参阅Fitting Images into Available Space。

Shapes

SwiftUI提供了几种常见的形状和修饰符老更改它们的大小、颜色、外观或其它方面。可以使用单个形状或多个形状的组合来创建背景、边框或其它视觉元素。可以使用像frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)这样的修饰器来定义形状的大小，或者允许它填充所有的可用空间。

// 示例显示水平排列的三种不同形状
HStack {
    Rectangle()                        // 正方形                                        
        .foregroundColor(.blue)        // 蓝色
    Circle()                           // 圆形
        .foregroundColor(.orange)      // 橘色
    RoundedRectangle(cornerRadius: 15, style: .continuous)    // 圆角矩形
        .foregroundColor(.green)                              // 绿色
}
.aspectRatio(3.0, contentMode: .fit)   // 修饰HStack的宽度是高度的3倍