如何让form表单居中_[SwiftUI 知识碎片] 创建表单

最新推荐文章于 2021-08-05 00:14:41 发布

weixin_39849127

最新推荐文章于 2021-08-05 00:14:41 发布

阅读量503

点赞数

文章标签：如何让form表单居中

本文链接：https://blog.youkuaiyun.com/weixin_39849127/article/details/111378244

版权

SwiftUI 提供了 Form 视图用于创建可滚动的用户输入列表。本文介绍了如何创建基本的 Form，以及当元素超过10个时如何使用 Section 和 Group 进行分组，同时讨论了 SwiftUI 中关于 Form 子元素数量的限制和居中显示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

译自 https://www. hackingwithswift.com/bo oks/ios-swiftui/creating-a-form
更多内容，欢迎关注公众号：Swift花园
喜欢文章？不如来个 ➕三连？关注专栏，关注我

创建表单

许多 app 要求用户输入一些信息，可能是设置某项属性，或者是选择自己想要的某个选项，等等。

SwiftUI 为这种场景专门提供了一个视图类型，称为Form。Form是一个可滚动列表，除了可以包含文本和图像这样的静态控件，也可以包含文本框，开关，按钮这些用户可交互的控件。

你可以把一个文本控件包裹起来，来创建一个最简单的Form，就像下面这样：

var body: some View {
    Form {
        Text("Hello World")
    }
}

如果你正在使用Xcode的画布，你会发现一个变化：起初“Hello World”是居中展示在一个白色的背景上，当你用Form将它包起来之后，背景变成了浅灰色，并且Hello World跑到左上角。

下面是一组数据的列表，就像你在设置应用里看到的那样。

Form {
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
}

实际上，你可以在form里放进任意多你想要的元素，不过如果元素超过10个，SwiftUI会要求你对元素进行分组。

举个例子，下面的代码展示了10行文本，这样做没有问题：

Form {
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
}

如果试图像这样直接增加到11行，是不允许的：

Form {
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
}

提示： SwiftUI中有一个限制：Form知道如何添加一个、两个、三个，直到十个元素到自身，但超过十个就不行。这是因为必须有一条界线。实际上，10个子元素的限制在SwiftUI中随处可见。

如果你想要往Form里塞超过十个元素，你可以用Group来分组这些元素，让每个分组的子元素数量小于等于10个。

Form {
    Group {
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
    }

    Group {
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
    }
}

注意：Group实际上并没有改变UI的视觉，只是让你可以解决10个子元素的限制。

如果你确实要求Form把元素分成不同的组块，你可以使用Section视图，它会将form拆分成视觉上具体呈现的分组，就像设置app里的做法：

Form {
    Section {
        Text("Hello World")
    }

    Section {
        Text("Hello World")
        Text("Hello World")
    }
}

把Form拆分成Section并没有套路或者规范可循，如何做取决于你。

我的公众号 这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～