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