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

您的代码存在的问题是：

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

解决方案：

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

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

NavigationLink 使我的文本元素居中而不是引导 SwiftUI

NavigationLink keeps aligning my text elements to center instead of leading SwiftUI

swift

swiftui

swiftui-navigationlink

swiftui-navigationview