中心滚动查看内容

Posted 2023-02-24

【中文标题】中心滚动查看内容

【英文标题】：Center Scroll View content

【发布时间】：2021-10-24 14:36:06

【问题描述】：

我使用 GeometryReader 将滚动视图居中，如下所示：

struct ContentView: View 
    var body: some View 
        NavigationView 
            GeometryReader  geom in
                ScrollView(.vertical, showsIndicators: false) 
                    ZStack  
                        my_super_view()
                    
                    .navigationBarTitle("Main")
                    .frame(width: geom.size.width)
                    .frame(minHeight: geom.size.height)
                
            
        .navigationViewStyle(StackNavigationViewStyle())
    

而且效果非常好。我的问题是容器 ZStack 的高度太大，页面可以像这样向下滚动： 当我尝试这样做时：

.frame(minHeight: geom.size.height-52)

页面停止滚动，但居中不佳。如何正确居中页面，使其完全适合主屏幕而不滚动到其下方？

更新： 我发现我可以使用 position() 而不是 frame()。在这种情况下，页面居中正确，但将来可能会导致一些问题。

【问题讨论】：

如果内容小于屏幕并且您需要将内容居中，滚动视图的原因是什么，滚动视图在这种情况下不合适。

【参考方案1】：

struct ContentView: View 
    var body: some View 
        NavigationView 
            GeometryReader  geom in
                ScrollView(.vertical, showsIndicators: false) 
                    ZStack  
                        my_super_view()
                    
                    .navigationBarTitle("Main")
                    .position(x: geom.size.width/2, y: geom.size.height/2)
                
            
            .navigationBarTitle("Диа Компаньон")
            .navigationBarTitleDisplayMode(.inline)
        .navigationViewStyle(StackNavigationViewStyle())
    

我不得不使用 .inline NavigationBarDisplayMode 和 position 而不是设置 ZStack 的宽度和高度