TabView 无法正确定位图像

问题描述

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

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

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

看这里 https://imgur.com/a/vITuCO2

理想情况下，图像应该在顶部拖尾，忽略安全区域和导航栏。文字就在下面。我如何实现这一目标？

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"
    ]
   )
 ]

解决方法

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

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

关于忽略分页标签视图的安全区域，请参阅帖子和回答 https://stackoverflow.com/a/62596307/12299030

,

在另一篇文章中找到了解决方案。信用@kimigori

1. 从 TabView 中删除 .edgesIgnoringSafeArea(.all)
2. 为具有屏幕宽度和高度的 TabView 添加框架
3. 用 ScrollView 包裹一个 TabView
4. 将 .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)
    }
}