时间戳

首页 > 解决方案 > SwiftUI TextField 采用最大宽度

swift - SwiftUI TextField 采用最大宽度

问题描述

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

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

这导致以下视图：

可触摸区域由蓝色边框突出显示，它占据了行的整个宽度

这样做的问题是，尽管列表项是导航链接，但用户单击项目的任何位置都会导致他们编辑文本内容。我更喜欢的是与 aTextField具有相同宽度的 a Text：

蓝色边框包裹文本而不是采用最大宽度

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

标签： swiftswiftuiswiftui-navigationlink

解决方案

不用道歉，你的问题很清楚。您可以使用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这里使用 a 来分隔 ourTextField和 our NavigationLink，以便它们可以单独交互。

注意Color.clearbefore our的使用，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()
          }
}
....

推荐阅读