嵌入在 NavigationView 中的 TabView 将内容下推

Posted 2023-02-24

【中文标题】嵌入在 NavigationView 中的 TabView 将内容下推

【英文标题】：TabView embedded in NavigationView pushes content down

【发布时间】：2021-11-18 12:14:26

【问题描述】：

我在NavigationView 中嵌入了TabView，并且视图中的文本被略微向下推。我试过移动视图，但它最终会在功能上中断。您可以看到绿色文本没有与设备的其余部分垂直对齐，而是与导航栏下的内容对齐。

var body: some View 
    NavigationView
        
        TabView 
            Text("TEST 1").foregroundColor(color).font(Font.custom("Catamaran-ExtraBold", size: 48)).navigationTitle("TEST 1")
            
            Text("TEST 2").foregroundColor(color).font(Font.custom("Catamaran-ExtraBold", size: 48)).navigationTitle("TEST 2")
        
        
        .foregroundColor(.black).navigationBarTitleDisplayMode(.inline)
        .font(Font.custom("Catamaran-ExtraBold", size: 20))
        .navigationBarItems(
            leading:
                NavigationLink(destination: SettingsView(), label: 
                    Image(systemName: "gearshape")
                )).foregroundColor(colorScheme == .dark ? .white : .black)
        
        
    
    .navigationViewStyle(.stack)
    .ignoresSafeArea()
    .tabViewStyle(.page)
    .indexViewStyle(.page(backgroundDisplayMode: .always))

【问题讨论】：

This post 可以帮助你。

@PtitXav 已经尝试过这些解决方案，但没有成功

@user302975 你想要达到的目标有点奇怪。将其居中就好像 NavigationView 不存在意味着视图不再在其容器中居中。它会看起来很奇怪，而且不会像这样居中

【参考方案1】：

你想要达到的目标有点奇怪。将其居中就好像 NavigationView 不存在意味着视图不再在其容器中居中。它会看起来很奇怪，而且不会像这样居中。

但是，您可以通过以下方式 实现这一目标。此示例使用GeometryReaders 来测量导航栏的高度，并将其去掉一半，因此文本现在显示在安全区域的中心。

之前：

struct ContentView: View 
    var body: some View 
        NavigationView 
            TabView 
                Text("TEST 1")
                    .font(.title.bold())
                    .foregroundColor(.green)
                    .navigationTitle("TEST 1")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.red.opacity(0.1))

                Text("TEST 2")
                    .font(.title.bold())
                    .foregroundColor(.green)
                    .navigationTitle("TEST 2")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.red.opacity(0.1))
            
            .tabViewStyle(.page)
            .indexViewStyle(.page(backgroundDisplayMode: .always))
        
        .navigationViewStyle(.stack)
    

之后：

struct ContentView: View 
    var body: some View 
        GeometryReader  geoRoot in // <- HERE
            NavigationView 
                GeometryReader  geo in // <- HERE
                    let yOffset = (geoRoot.safeAreaInsets.top - geo.safeAreaInsets.top) / 2 // <- HERE

                    TabView 
                        Text("TEST 1")
                            .font(.title.bold())
                            .foregroundColor(.green)
                            .navigationTitle("TEST 1")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.red.opacity(0.1))
                            // <- Also replicate offset here, not done for demo

                        Text("TEST 2")
                            .font(.title.bold())
                            .foregroundColor(.green)
                            .navigationTitle("TEST 2")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.red.opacity(0.1))
                            .offset(y: yOffset) // <- HERE
                    
                    .tabViewStyle(.page)
                    .indexViewStyle(.page(backgroundDisplayMode: .always))
                
            
            .navigationViewStyle(.stack)
        
    

---

结果

之前：TEST 1 选项卡 之后：TEST 2 选项卡