TabView 无法正确定位图像

Question

我正在构建分步视图（使用 PageTabViewStyle 的分页滚动视图）

我尝试将图像和文本放在 ZStack 中，但这并没有解决问题。我添加了一个带填充的Spacer()，也失败了。

让我感到困惑的是，每当我注释掉 PageTabViewStyle 时，定位都是正确的，但 TabView 中断了，尽管它包裹在右括号中。

理想情况下，图像应该顶部尾随，忽略安全区域和 NavigationBar。文字就在下方。我该如何实现？

struct ContentView: View {
    var recipe: Recipe
    var body: some View {
            
        TabView {
            ForEach(0..<recipe.directions.count) { x in
                ScrollView(.vertical, showsIndicators: false) {
                       VStack {
                          Image(recipe.images[x])
                                .resizable()
                                .aspectRatio(contentMode: .fit)

                     Spacer()
                                
                             Text(recipe.directions[x])
                                    .font(.system(size: 29, weight: .medium))
                                    .foregroundColor(.primary)
                                    .padding()
                        
                             }.navigationTitle("")
                          }.edgesIgnoringSafeArea(.top)
                        }
                     }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                }
             }
            
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            NavigationView {
          ContentView(recipe: recipesData[0])
            }
          }
       }

数据文件

struct Recipe: Identifiable {
    var id = UUID()
    var directions: [String]
    var images: [String]
}

let recipesData: [Recipe] = [
    Recipe(
    directions: [
    "Gather all ingredients on your countertop.",
    "Make the pesto by washing the parsley and mint. Slice tomatoes",
    "Cut the cucumber and measure 1 cup walnuts, 1/2 cup walnut oil and 2 tbsp of lemon juice.",
    ],
    images: [
    "step1",
    "step2",
    "step3"
    ]
   )
 ]

Answer 1

您只看到空的大导航栏，因此需要将其隐藏

    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .navigationTitle("")
    .navigationBarHidden(true)

关于忽略分页选项卡视图的安全区域，请参阅 post 并回答

Answer 2

在另一个 post 中找到了解决方案。信用@kimigori

从 TabView 中删除 .edgesIgnoringSafeArea(.all)
使用屏幕宽度和高度向 TabView 添加框架
用 ScrollView 包裹 TabView
将 .edgesIgnoringSafeArea(.all) 添加到 ScrollView

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue]

    var body: some View {
        ScrollView {
            TabView {
                ForEach(0...2, id: \.self) { index in
                    Rectangle()
                        .fill(colors[index])
                }
            }
            .frame(
                width: UIScreen.main.bounds.width ,
                height: UIScreen.main.bounds.height
            )
            .tabViewStyle(PageTabViewStyle())
            
        }
        .edgesIgnoringSafeArea(.all)
    }
}

TabView 无法正确定位图像

TabView unable to position image correctly

swift

swiftui

swiftui-tabview