NavigationLink 不断将我的文本元素对齐到中心，而不是领先 SwiftUI

Question

我有一个CustomSearchBar看起来像这样的视图

但是，当我用 包裹它时NavigationLink，占位符文本将居中。用户输入也将居中。

使用时如何保持前导对齐NavigationLink？

我的代码结构如下所示：

enum Tab {
 case social
}

struct MainAppView: View {
    @State var selection: Tab = .social
    var body: some View {
        TabView(selection: $selection) {
            ZStack{
                CustomButton()
                NavigationView { SocialView() }
               
            }.tabItem{Image(systemName: "person.2")}.tag(Tab.social)
            // other tabs....
        }

struct SocialView: View {
    // ...
    var body: some View {
        GeometryReader{ geometry in
            VStack{
                NavigationLink(destination: Text("test")) {  
                    CustomSearchBar()
                      //...
                    }.navigationBarHidden(true)
                    .navigationBarTitle(Text(""))
            }
        }
    }
}


struct CustomSearchBar: View {
    
    var body: some View {
        VStack{
            HStack {
                SearchBarSymbols(// some binding arguments)
                CustomTextField(// some binding arguments)
                CancelButton(// some binding arguments)
                }
                .padding(.vertical, 8.0)
                .padding(.horizontal, 10.0)
                .background(Color("SearchBarBackgroundColor"))
                .clipShape(Capsule())
            }
            .padding(.horizontal)
         }
    }

struct CustomTextField: View {

    var body: some View {
        TextField("friend name", text: $searchText)
                .frame(alignment: .leading)
                .onTapGesture {
                    // some actions
                }
                .foregroundColor(Color("SearchBarSymbolColor"))
                .accentColor(Color("SearchBarSymbolColor"))
                .disableAutocorrection(true)
    }
}

Answer 1

您的代码的问题是：

1. 您的导航视图包含搜索字段。这意味着推送的任何新视图都将覆盖搜索字段。
2. 您的搜索字段位于导航链接内。这里存在冲突的交互，因为它有效地将字段变成了按钮，即点击搜索字段与点击导航链接。

解决方案：

将导航视图移动到文本字段下方，以便新视图出现而不覆盖它。然后更改导航链接，以便通过在编辑搜索字段时触发的绑定来激活它：

struct SocialView: View {
    @State private var text: String = ""
    @State private var isActive: Bool = false

    var body: some View {
        GeometryReader{ geometry in
            VStack {
                CustomTextField(searchText: $text, isActive: $isActive)
                    .padding(.vertical, 8.0)
                    .padding(.horizontal, 10.0)
                    .background(Color("SearchBarBackgroundColor"))
                    .clipShape(Capsule())

                NavigationView {
                    NavigationLink(isActive: $isActive, destination: { Text("test") }, label: { EmptyView() })
                }
            }
        }
    }
}

struct CustomTextField: View {
    @Binding var searchText: String
    @Binding var isActive: Bool

    var body: some View {
        TextField("friend name", text: $searchText) { editing in
            self.isActive = editing
        } onCommit: {

        }
        .frame(alignment: .leading)
        .disableAutocorrection(true)
    }
}