SwiftUI 详细视图显示在屏幕底部

Posted

技术标签:

【中文标题】SwiftUI 详细视图显示在屏幕底部【英文标题】:SwiftUI detail view displayed at the bottom of the screen 【发布时间】:2020-04-19 17:02:29 【问题描述】:

我正在使用 SwiftUI 创建从 List 的行到 NavigationView 中的详细视图的 NavigationLink。在我的 CustomView 中,我有 2 个组:

    第一个组包含应用徽标和搜索栏 第二个包含一个带有 NavigationLink 的列表(我用来显示搜索结果)

当我使用 NavigationLink 显示行的详细信息时,它可以工作,但我的 RetailerView() 显示在屏幕底部。

var body: some View 

    VStack 
        // Logo
        Group 
                Spacer()
                LogoView()
                Spacer()
        
        // search bar
        Group 
            TextField("search you retailer...", text:$search, onCommit: searchRetailer)
                .disableAutocorrection(true).font(.body).frame(width: 270, height: 30, alignment: .center).padding().textFieldStyle(RoundedBorderTextFieldStyle()).autocapitalization(UITextAutocapitalizationType.none)
            Spacer()
        

        if(self.retailersList.count == 0)
            Text("No results found!")
        else
            Group 
                VStack 
                    NavigationView 
                        List 
                            ForEach(retailersList)  retailer in
                                NavigationLink(destination: RetailerView())

                                    RetailerRaw(retailer: retailer, color: self.computeColor(retailer: retailer))

                                .isDetailLink(true)
                            
                        .listStyle(GroupedListStyle())
                     //end NavigationView
                
            

        
        Spacer()
     //end VStack
 //end body

【问题讨论】:

尝试将 NavigationView 放在 VStack 的顶部(在 var body: some View 之后) 谢谢,它成功了! 好!我会把它写成答案。 【参考方案1】:

您必须将 NavigationView 放在一切之上。 将 NavigationView 放在 VStack 的顶部(在var body: some View 之后)

【讨论】:

以上是关于SwiftUI 详细视图显示在屏幕底部的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Swift ui 底部使用 ScrollView 启动视图?

Choppy Animation SwiftUI 嵌套视图

SwiftUI:在 Single 和 HStack 视图之间制作动画

为啥 SwiftUI“表单”会导致我的按钮转到屏幕底部?

SwiftUI 中的列表视图占据整个屏幕高度

从目标视图返回时,SwiftUI NavigationLink 显示为突出显示