SwiftUI选择器手动触发展开

Question

我有以下视图：

相应的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：

如何扩大红色矩形的触摸区域，使其包括整个黄色区域？

- Niklas

---

你只需要将新的选择值分配给你的selectedIndex变量。 - YodagamaHeshan

“open” 是什么意思？Picker 是否在 List 内部？ - mahan

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

我认为在视图上显示Picker并不是一个好主意。相反，可以像iOS日历中的那样扩展行。这个链接 https://stackoverflow.com/questions/64919284/swiftui-animate-view-expansion-show-hide 可能会对你有所帮助。这个问题是我自己的，如果你的SuperView不是一个List，它可以完美地工作。 - mahan

@pawello2222 我已更新问题，包括截图和可复制的视图。 - Niklas

@Niklas - 你需要狭窄的红色矩形吗？并且在那个位置吗？还是你只想要黄色的“条”？ - DonMag

Answer 1

@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()
    }
}

我们拭目以待苹果何时决定打破这个实现。

- Niklas

---

完美的解决方案..!! - Renjithnath Ramachandran

Answer 2

不确定这是否完全符合您的要求，但请尝试一下（初始视图是一个“空白”黄色条）：

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”之后：

- DonMag

---

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

Answer 3

一个棘手的解决方案是使用这个。

ZStack (alignment: .trailing) {
 ViewWhichYouWantToClick()

 Picker(selection: $pronouns, label: Text("")) {
       ForEach(themes,id:\.self) {
          Text($0)
       }
 }
 .opacity(0.02)
 .background(.clear)
 .accentColor(.white)
}
 

因此，Picker有点看不见，但仍然可点击

- Nikita Nikitin