ios SwiftUI:List和TabView相互重叠

w80xi6nr  于 2023-05-19  发布在  iOS
关注(0)|答案(1)|浏览(153)

在我的应用程序中,我试图显示:屏幕顶部的SegmentedPicker,然后是List,屏幕右下角的简单按钮使用safeAreaInset,然后是tabBar使用TabView
我的问题是,在屏幕底部,ListTabView相互重叠。最后附上截图
下面是我的TabView代码

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                FirstView()
            }
            .tabItem {
                Label("First", systemImage: "pencil")
            }
            
            SecondView()
                .tabItem {
                    Label("Second", systemImage: "pencil.circle.fill")
                }
        }
    }
}

下面是我的第一个TabView的代码。
看起来像一些问题与我的Picker这是内部的VStack。因为如果我删除Picker,我没有任何问题。

struct FirstView: View {
    var firstViewPicker = ["one", "two", "three"]
    @State private var segmentSelection = 0

    var body: some View {
        VStack {
            //MARK: - Picker related stuff
            Picker("", selection: $segmentSelection) {
                ForEach(0..<firstViewPicker.count, id: \.self) { id in
                    Text(firstViewPicker[id])
                }
            }
            .pickerStyle(.segmented)
            .padding()
            
            List {
                ForEach(0..<40, id: \.self) { id in
                    Text("Row Item #\(id)")
                }
            }
            .listStyle(.grouped)                
        }
        .navigationTitle("Home")
        .navigationBarTitleDisplayMode(.inline)
        .safeAreaInset(edge: .bottom, alignment: .trailing) {
            Button(action: {
                print("Tapped")
            }, label: {
                Image(systemName: "trash.circle.fill")
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.white, .brown)
                    .font(.system(size: 50))
            })
            .padding()
            .shadow(color: .gray, radius: 5, x: 0, y: 0)
        }
    }
}

下面是我的第二个TabView的代码

struct SecondView: View {
    var body: some View {
        Text("Hello, 2nd  world!")
    }
}

下面是我得到的ListTabView重叠问题的屏幕截图

我做错什么了吗?我们怎样才能使这一切顺利呢?好心帮忙

**仅供参考:**我正在使用macOS 13.3,Xcode 14.3,模拟器14 Pro Max与iOS 16.4
**仅供参考:**刚刚注意到无法在iPhone- 12,iPhone模拟器-14上重现。并且可以在iPhone模拟器-14 pro,iPhone模拟器-14 pro max上重现

34gzjxbg

34gzjxbg1#

是的,因为.tabitem被Navigation堆栈本身覆盖。你必须在那里提供填充物。尝试为我工作。在Xcode 14.3上测试

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                FirstView()
            }.padding()
            .tabItem {
                Label("First", systemImage: "pencil")
            }
            
            SecondView()
                .tabItem {
                    Label("Second", systemImage: "pencil.circle.fill")
                }
        }
    }
}

相关问题