SwiftUI 限制表单中选择器的可点击区域答案

【问题标题】：SwiftUI limit tappable area of picker in formSwiftUI 限制表单中选择器的可点击区域
【发布时间】：2021-09-24 15:47:36
【问题描述】：

我想将表单中选择器的可点击区域限制为仅其可见的文本区域（即下图中的黑色矩形）。目前整行都可以点击。

Screen capture of the program

代码如下：

import SwiftUI

struct ContentView: View {
    @State var rate: String = ""
    @State var units = ["mL/day","mL/hour"]
    @State var unit: Int = 0
    var body: some View {
        NavigationView{
            Form{
                HStack{
                    Text("Rate")
                    TextField("0", text: $rate)
                    Picker(selection: $unit, label: Text(""), content: {
                        ForEach(0..<units.count, content: { unit in
                            Text(units[unit])
                        })
                    })
                    .frame(width: 100.0)
                    .compositingGroup()
                    .clipped()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我通读了this question 并尝试添加.clipped() 和.compositingGroup()，但似乎没有用。

【问题讨论】：

标签： forms swiftui picker

【解决方案1】：

您将不得不稍微重新设计 UI。我会推荐这个：

struct ContentView: View {
    @State var rate: String = ""
    @State var units = ["mL/day","mL/hour"]
    @State var unit: Int = 0
    var body: some View {
        NavigationView{
            Form{
                Section(header: Text("Rate")) { // Do This
                    HStack{
                        TextField("0", text: $rate)
                            .background(Color.red)
                        Picker(selection: $unit, label: Text(""), content: {
                            ForEach(0..<units.count, content: { unit in
                                Text(units[unit])
                            })
                        })
                        .frame(width: 100)
                        .clipped()
                        .background(Color.green)
                    }
                }
            }
        }
    }
}

我为每个子视图制作了彩色背景。问题不在于整行都是可选的。这是当您在行中有Picker() 时，任何本身不可选择的视图，在这种情况下Text() 触发Picker()。如果您使用您的代码并在文本后面放置彩色背景，您将看到会发生什么。如果您点击Picker()，它就会触发。如果您点击TextField()，您会在那里获得一个插入点。但是，如果您点击Text()，它会触发Picker()。 .compositingGroup 根本不会影响这种行为。

我在一个应用程序中有这个精确的设计，解决方案是将文本放入带有标题的Section，或者将Text()放在上面的行中。

【讨论】：