时间戳

首页 > 解决方案 > 我如何将所有元素放入分段控件中？

ios - 我如何将所有元素放入分段控件中？

问题描述

目前，我的分段控件中有 6 个元素，我想一次将它们全部放在屏幕上，但我找不到这样做的方法。

我已经寻找根据文本更改段大小的方法，并尝试更改每个段的框架。

struct BundleView: View {

    let areas = ["Crafts Room", "Pantry", "Fish Tank", "Boiler Room", "Bulletin Board", "Vault"]

    @State var selectedArea = 0

    var body: some View {
        Picker(selection: $selectedArea, label: EmptyView()) {
            ForEach(0..<areas.count) { index in
                Text(self.areas[index]).tag(index)
            }
        }.pickerStyle(SegmentedPickerStyle())

    }
}

当前显示

这就是它目前在纵向模式下的样子。显示的 6 个元素中只有 4 个我们。

横向模式将显示我想要的所有片段。

标签： iosswiftui

解决方案

TL;博士

您不能将所有文本“按原样”放入分段选择器中，因为 SwiftUI 的设计者并没有构建分段选择器来提供这么多选项。你有几个选择。

图片

正如 dasblinkenlight 建议的那样，您可以将文本替换为小图像，最多可容纳 6 个选项：

struct BundleView: View {

    let areas = ["a.circle", "b.circle", "c.circle", "d.circle", "e.circle", "f.circle"]

    @State var selectedArea = 0

    var body: some View {
        Picker(selection: $selectedArea, label: EmptyView()) {
            ForEach(0..<areas.count) { index in
                Image(systemName: self.areas[index]).tag(index)
            }
        }.pickerStyle(SegmentedPickerStyle())
    }
}

在此处输入图像描述

自定义控件

您可以构建自定义控件。这是一个很酷的设计，来自swiftui-lab.com的动画：

自定义控件

但是为什么我不能使用 Picker？

SwiftUI 往往有两种类型的 View：

  1. 这些设计易于修改和组合，提供无限的可定制性以获得独特的外观和感觉。
  2. 那些旨在为某种类型的交互提供标准、一致的感觉的工具，无论它们在什么应用程序中使用。

类型 1 的一个示例是文本。您可以更改字体大小、粗细、字体、颜色、背景、填充等。它专为您修改而设计。

类型 2 的一个示例是 Picker。您不能直接控制项目宽度，不能更改视图周围的填充，不能告诉它换行为多行等。他们不希望它非常可定制，因为这样每个应用程序的选择器都会行为不同，违背了标准控件的目的。

分段选取器最适合 2-4 个项目，它们的描述相对较短。如果您想要除此之外的东西，您需要制作一个自定义控件。

推荐阅读