[英]SwiftUI TextField takes max width
我有一个导航列表,每个列表项都采用这种格式:
HStack {
TextField("Insert something here.",text: self.$userData.pages[i].title)
.border(Color.blue)
Spacer()
}
这导致以下视图:
这样做的问题是,尽管列表项是导航链接,但用户单击项目的任何位置都会导致他们编辑文本内容。 我更喜欢的是与Text
具有相同宽度的TextField
:
因此,如果用户在TextField
之外单击,导航将起作用,但如果他们单击文本,它将让他们编辑文本。 (上面的视图带有Text
字段)。
如果我问了一个不清楚或不好的问题,我深表歉意。 我是 Stack Overflow 和 SwiftUI 的新手。
编辑:
我试过使用fixedSize
修饰符,TextField 正确地包装了我的文本,但现在导航链接不起作用(即点击它只是不能导航)。 这是我的完整代码:
NavigationLink(destination: PageView(page: self.userData.pages[i])) {
HStack {
Button(action: {}){
TextField(" ", text: self.$userData.pages[i].title)
.fixedSize()
}
.buttonStyle(MyButtonStyle())
.border(Color.blue)
Spacer()
}
}
不用道歉,你的问题很清楚。 您可以通过使用fixedSize()
所以你的代码应该是这样的
HStack {
TextField("Insert something here.",text: self.$userData.pages[i].title)
.border(Color.blue)
.fixedSize()
Spacer()
}
您可以通过传递诸如.fixedSize(horizontal: true, vertical: false)
之类的参数来进一步指定拉伸的方式, vertical
或horizontal
,甚至两者
更新答案以符合您的新要求
import SwiftUI
struct StackOverflow5: View {
@State var text: String = ""
@State var selection: Int? = nil
var body: some View {
NavigationView {
ZStack {
NavigationLink(destination: Page2(), tag: 1, selection:self.$selection) {
Color.clear
.onTapGesture {
self.selection = 1
}
}
TextField("Text", text: self.$text)
.fixedSize()
}
}
}
}
struct StackOverflow5_Previews: PreviewProvider {
static var previews: some View {
StackOverflow5()
}
}
struct Page2: View {
var body: some View {
Text("Page2")
}
}
我们在这里使用ZStack
将TextField
和NavigationLink
分开,以便它们可以单独交互。
注意在我们的TextField
之前使用Color.clear
,这是故意的,以便我们的TextField
具有交互优先级。 我们还使用了 Color.clear,因为它会作为背景拉伸,而且很clear
,所以不可见。
显然我在这里硬编码1
但这可以来自List
或ForEach
此外,如果您不想使用selection
和tag
,您可以执行以下操作
...
@State var isActive: Bool = false
...
NavigationLink(destination: Page2(), isActive: self.$isActive) {
Color.clear
.onTapGesture {
self.isActive.toggle()
}
}
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.