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

Posted 2023-04-13

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

【英文标题】：NavigationLink keeps aligning my text elements to center instead of leading SwiftUI

【发布时间】：2021-12-18 22:24:28

【问题描述】：

我有一个看起来像这样的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() 
               
            .tabItemImage(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)
    

【问题讨论】：

你为什么把搜索栏放在导航链接里？它应该在哪个用户操作上导航？

它将导航到专门的搜索页面。例如，请参阅 UberEats 应用程序。

那为什么会有TextField呢？您基本上已经将TextField 变成了Button。我怀疑您想获取输入并导航到您的搜索页面，输入为搜索页面提供所需的信息？如果是这样，您应该以编程方式查找触发NavigationLink。

【参考方案1】：

您的代码存在以下问题：

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

解决方案：

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

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)