1

我正在构建分步视图（Paged Scrolling View with PageTabViewStyle）

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

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

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

理想情况下，图像应该在顶部尾随，忽略安全区域和 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"
    ]
   )
 ]
4

2 回答 2

1

你看到的只是空的大导航栏，所以需要隐藏它

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

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

于 2021-01-01T06:32:32.603 回答
0

在另一篇文章中找到了解决方案。信用@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)
    }
}
于 2021-01-01T21:10:20.623 回答