SwiftUI Picker 手动触发扩展

Posted 2023-02-24

【中文标题】SwiftUI Picker 手动触发扩展

【英文标题】：SwiftUI Picker manually trigger expansion

【发布时间】：2021-01-03 11:43:29

【问题描述】：

我有以下观点：

Swift 代码如下所示：

struct TestView: View 
    let options = [" ", "1", "2", "3", "4", "5", "6"]
    @State var selectedIndex: Int = 0

    var body: some View 
        HStack(spacing: 0) 
            Text("One")

            Spacer()

            Picker(selection: $selectedIndex, label: Text(options[selectedIndex])) 
                ForEach(0 ..< options.count) 
                    Text(options[$0])
                
            
            .background(Color.red)
            .pickerStyle(MenuPickerStyle())
        
        .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
        .background(Color.yellow)
    

点击红色方块时，将打开 Picker：

如何将红色矩形的触摸区域扩展到整个黄色区域？

【问题讨论】：

您只需要在您的 selectedIndex 变量中分配新的选择值

“开放”是什么意思？选择器在 List 里面吗？

你能添加一个更详细/可重现的例子吗？

我不认为在视图上显示 Picker 是一个好主意。而是像 ios Calenadar 中的那样展开该行。这个***.com/questions/64919284/… 可能会对你有所帮助。问题是我的，如果您的 SuperView 不是列表，它会完美运行。

@pawello2222 我已经更新了问题，包括屏幕截图和可复制的视图

【参考方案1】：

不确定这正是您所追求的，但请尝试一下（初始视图是“空白”黄色条）：

import SwiftUI

struct PickerTestView: View 
    let options = [" ", "1", "2", "3", "4", "5", "6"]
    let optionNames = [" ", "One", "Two", "Three", "Four", "Five", "Six"]
    @State var selectedIndex: Int = 0

    var body: some View 
        ZStack 
            HStack(spacing: 0) 
                Text(optionNames[selectedIndex])
                Spacer()
            
            .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
            .background(Color.yellow)
            HStack(spacing: 0) 
                Picker(selection: $selectedIndex, label: Text(" ").frame(maxWidth: .infinity), content: 
                    ForEach(0 ..< options.count) 
                        Text(options[$0])
                    
                )
                .pickerStyle(MenuPickerStyle())
            
        
    



struct PickerTestView_Previews: PreviewProvider 
    static var previews: some View 
        PickerTestView()
    

发布时：

点击黄色条上的任意位置：

选择“3”后：

【讨论】：

Picker 显示当前选择的选项而不是 iOS15 中的标签，因此选择器不再不可见。

【参考方案2】：

@DonMag 的答案在 iOS 15 上停止工作。这是一个更新的答案，它确实有效。从技术上讲，它不使用 Slider，但行为是相同的。而是使用Menu。

struct PickerTestView: View 
    let options = [" ", "1", "2", "3", "4", "5", "6"]
    let optionNames = [" ", "One", "Two", "Three", "Four", "Five", "Six"]
    @State var selectedIndex: Int = 0

    var body: some View 
        ZStack 
            HStack(spacing: 0) 
                Text(optionNames[selectedIndex])
                Spacer()
            
            .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
            .background(Color.yellow)

            HStack(spacing: 0) 
                Menu 
                    ForEach(0 ..< options.count) 
                        let index = $0
                        Button("\(options[index])") 
                            selectedIndex = index
                        
                    
                 label: 
                    Label("", image: "")
                        .labelStyle(TitleOnlyLabelStyle())
                        .frame(maxWidth: .infinity)
                
            
        
    



struct PickerTestView_Previews: PreviewProvider 
    static var previews: some View 
        PickerTestView()
    

让我们看看 Apple 什么时候决定中断这个实现。