时间戳

首页 > 解决方案 > SwiftUI 限制表单中选择器的可点击区域

forms - SwiftUI 限制表单中选择器的可点击区域

问题描述

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

程序的屏幕截图

这是代码：

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

我通读了这个问题并尝试添加.clipped()，.compositingGroup()但似乎没有用。

标签： formsswiftuipicker

解决方案

您将不得不重新设计 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()在行中有 a 时，任何本身不可选择的视图，在这种情况下都会Text()触发Picker(). 如果您使用您的代码并在文本后面放置彩色背景，您将看到会发生什么。如果你点击Picker()它就会触发。如果你点击TextField()你会得到一个插入点。但是如果你点击Text()它会触发Picker(). .compositingGroup根本不影响这种行为。

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

推荐阅读