显示大字体符号时增大选取器/下拉菜单的大小

Question

我想缩放选取器选择下拉列表的大小，使其与元素的字体大小保持一致。我使用下面的代码来显示带有符号列表的选择器/下拉列表：

import SwiftUI

struct ContentView: View {
    @State private var pickerSelection: String = "sun.min"
    let symbols = ["sun.max.fill", "sun.min.fill", "sun.min", "figure.walk"]
    var body: some View {
        VStack {
            Picker("Icon label", selection: $pickerSelection) {
                ForEach(symbols, id: \.self) { symbolString in
                    Text(Image(systemName: symbolString))
                }
            }
            .scaledToFit()
        }
        .padding()
    }
}

预览

问题

我想增加标签的大小并使选择器标签更大，假设我确实使用

.font(.title)

来实现这一点：

struct ContentView: View {
    @State private var pickerSelection: String = "sun.min"
    let symbols = ["sun.max.fill", "sun.min.fill", "sun.min", "figure.walk"]
    var body: some View {
        VStack {
            Picker("Icon label", selection: $pickerSelection) {
                ForEach(symbols, id: \.self) { symbolString in
                    Text(Image(systemName: symbolString))
                        .font(.title)
                }
            }
            .scaledToFit()
        }
        .padding()
    }
}

这看起来很可怕：

如何正确控制选择器/下拉元素中文本/图标标签的大小，并使其与菜单项的大小一致地展开？

我对替代 UI 元素持开放态度，这些元素将使我能够以一种美观的方式实现相同的结果 - 带有符号的下拉列表，我可以在其中控制整个元素的大小并根据符号的大小进行相应的缩放。

Answer 1

您可以尝试将

.scaleEffect

应用于

Picker

。

• 默认情况下，

  Picker

  填充屏幕的整个宽度。为了防止这种情况，请设置

  maxWidth

  ，或应用

  .fixedSize()

  。

• 缩放效果也适用于选择器标签和菜单图标。然而，它似乎不适用于扩展菜单中看到的项目（不幸的是）。

• 要使选取器标签保持常规大小，请向

  Picker.init

  提供一个空字符串，并使用前导

  Text

  元素代替。您可能还想在

  .accessibilityLabel

  中添加

  Picker

  ，以替代缺失的标签。

• 对于选择器项目，我发现最好使用带有标签样式

  Label

  的

  .iconOnly

  ，而不是将图像包装为

  Text

  项目。

• 如有必要，请使用填充来补偿对布局产生影响的缩放。

VStack {
    HStack {
        Text("Icon label")
        Picker("", selection: $pickerSelection) {
            ForEach(symbols, id: \.self) { symbolString in
                Label(symbolString, systemImage: symbolString)
                    .labelStyle(.iconOnly)
            }
        }
        .accessibilityLabel("Icon label")
        .frame(maxWidth: 100) // or .fixedSize()
        .padding(.leading, 15)
        .padding(.trailing, 25)
        .padding(.vertical)
        .scaleEffect(1.5)
    }
}
.padding()