主页 / coding / 问题 / 79059543
Accepted
sudoExclamationExclamation
Asked: 2024-10-07 00:15:53 +0800 CST

如何使 SwiftUI Picker 的段实际上与其内容一样宽而不是与最宽的段一样宽？

  • 772

在 SwiftUI 中，我有以下内容：

func segments() -> [String] {
    var toReturn = Calendar.current.veryShortWeekdaySymbols
    toReturn.append("T")
    return toReturn
}

Picker("Day of week?", selection: $selectedDay) {
    ForEach(segments(), id: \.self) {
        Text($0)
            .scaledToFit()
    }
}
.pickerStyle(.segmented)
.fixedSize()

显示为：

在此处输入图片描述

但是，如果我将改为toReturn.append("T")更长的字符串，例如toReturn.append("Tasks")，那么段的宽度就会变得与最宽的段一样宽，并且实际上并不适合其内容：

在此处输入图片描述

如何使 SwiftUI Picker 的段实际上与其内容一样宽而不是与最宽的段一样宽？

1 个回答

  1. Best Answer

    SwiftUI 目前不支持此功能，因此您必须转到 UIKit 并设置UISegmentedControl.apportionsSegmentWidthsByContent为 true。

    如果你不希望任何分段选择器具有相同的宽度，只需使用UIAppearanceAPI，

    // put this in onAppear wherever you need it
UISegmentedControl.appearance().apportionsSegmentWidthsByContent = true

    否则，你可以编写自己的UIViewRepresentable。以下是示例：

    struct FitWidthSegmenetedPicker<Selection: Hashable>: UIViewRepresentable {
    let options: [Selection]
    @Binding var selection: Selection
    let titleForOption: (Selection) -> String
    
    init(
        _ options: [Selection],
        selection: Binding<Selection>,
        titleForOption: @escaping (Selection) -> String = { String(describing: $0) }
    ) {
        self.options = options
        self._selection = selection
        self.titleForOption = titleForOption
    }
    
    func makeUIView(context: Context) -> UISegmentedControl {
        let segmentedControl = UISegmentedControl()
        segmentedControl.apportionsSegmentWidthsByContent = true
        segmentedControl.addTarget(context.coordinator, action: #selector(Coordinator.selectionChanged(_:)), for: .valueChanged)
        return segmentedControl
    }
    
    func updateUIView(_ uiView: UISegmentedControl, context: Context) {
        uiView.removeAllSegments()
        for option in options.reversed() {
            uiView.insertSegment(withTitle: titleForOption(option), at: 0, animated: false)
        }
        uiView.selectedSegmentIndex = options.firstIndex(of: selection) ?? 0
        context.coordinator.onSelectionChanged = { index in
            selection = options[index]
        }
    }
    
    func makeCoordinator() -> Coordinator {
        .init()
    }
    
    @MainActor
    class Coordinator: NSObject {
        var onSelectionChanged: ((Int) -> Void)?
        
        @objc func selectionChanged(_ sender: UISegmentedControl) {
            onSelectionChanged?(sender.selectedSegmentIndex)
        }
    }
}

    用法：

    struct ContentView: View {
    let options = ["x", "xx", "xxx", "xxxx", "xxxxxxxxxxxx"]
    @State private var selection = "x"
    
    var body: some View {
        FitWidthSegmenetedPicker(options, selection: $selection)
            .fixedSize()
        Text(selection)
    }
}

    在此处输入图片描述

    • 1

相关问题