Question

我有一个导航列表，每个列表项都采用以下格式：

HStack {
        TextField("Insert something here.",text: self.$userData.pages[i].title)
            .border(Color.blue)
        Spacer()
    }

这将导致以下视图：

The touchable area is highlighted by the blue border and it takes the whole width of the row

此问题是，尽管列表项是导航链接，但用户单击该项的任何位置都将导致他们编辑文本内容。我希望使用的TextField与Text的宽度相同：

The blue border wraps the text instead of taking the max width

因此，如果用户在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()
                        }
                    }

Answer 1

无需道歉，您的问题很明确。您可以使用fixedSize()

所以您的代码应该像这样

HStack {
        TextField("Insert something here.",text: self.$userData.pages[i].title)
            .border(Color.blue)
            .fixedSize()
        Spacer()
    }

您可以通过传递这样的参数来进一步指定vertical或horizontal甚至是两者的拉伸程度 .fixedSize(horizontal: true, vertical: false)

已更新的答案来满足您的新要求

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之间进行分隔，以便可以分别进行交互。

请注意，在我们的Color.clear之前使用TextField的目的是为了使我们的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()
          }
}
....

SwiftUI TextField采用最大宽度

1 个答案: