Question

我尝试过类似以下屏幕截图的布局。基本上是一个长长的垂直滚动视图，带有许多圆角窗格。

我的代码如下：

struct DetailView: View {

@EnvironmentObject var modelData: ModelData

var body: some View {
    ZStack {
        Image("Dummy")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .opacity(0.2)
            .frame(width: .infinity, height: .infinity)
            .edgesIgnoringSafeArea(.all)
        
    ScrollView(.vertical, showsIndicators: false) {
        VStack(alignment: .leading, spacing: 0) {
            
            TabView {
                
                VStack(alignment: .leading, spacing:0) {
                    HStack {
                        Text("A long Text title").font(.title)
                        Spacer()
                    }.frame(width:UIScreen.main.bounds.size.width*0.9)
                    HStack {
                        Text("A long Text title").font(.title)
                        Spacer()
                    }.frame(width:UIScreen.main.bounds.size.width*0.9)
                    HStack {
                        Text("A long Text title").font(.title)
                        Spacer()
                    }.frame(width:UIScreen.main.bounds.size.width*0.9)
                    HStack {
                        Text("A long Text title").font(.title)
                        Spacer()
                    }.frame(width:UIScreen.main.bounds.size.width*0.9)
                }
                
            }.tabViewStyle(PageTabViewStyle())
            .background(Color.green)
            
            TabView {
                ImageView()
                    .frame(width:UIScreen.main.bounds.size.width*0.9)
                    .cornerRadius(UIConstants.cardCornerRadius)
                ImageView()
                    .frame(width:UIScreen.main.bounds.size.width*0.9)
                    .cornerRadius(UIConstants.cardCornerRadius)
                ImageView()
                    .frame(width:UIScreen.main.bounds.size.width*0.9)
                    .cornerRadius(UIConstants.cardCornerRadius)
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .background(Color.red)
            
            TabView {
                TextInfoView()
                    .frame(width:UIScreen.main.bounds.size.width*0.9)
                    .cornerRadius(UIConstants.cardCornerRadius)
                    .padding([.horizontal])
            }.tabViewStyle(PageTabViewStyle())
            .background(Color.green)
            
            TabView {
                TextInfoView()
                    .frame(width:UIScreen.main.bounds.size.width*0.9)
                    .cornerRadius(UIConstants.cardCornerRadius)
                    .padding([.horizontal])
            }.tabViewStyle(PageTabViewStyle())
            .background(Color.purple)
        }
    }
    }
}

}

struct TextInfoView: View {
    var body: some View {
        VStack {
            Text("Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview. Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.").padding()
        }
        .background(Color.yellow)
    }
}

struct ImageView: View {
    var body: some View {
        Image("Dummy")
            .resizable()
            .aspectRatio(contentMode: /*@START_MENU_TOKEN@*/.fill/*@END_MENU_TOKEN@*/)
            .frame(height:UIScreen.main.bounds.size.height*0.7)
    }
}

结果如下：

这里有几个问题：

您可以看到我也尝试用 TabView 包装 TextInfoView。这是因为如果我不将它包含在 TabView 中，它就无法与上面带有 ImageView 的 TabView 对齐。有什么办法可以解决这个问题？
在顶部，绿色区域。为什么文本周围有这么大的填充？我怎样才能去除那些额外的绿色区域？我希望它的顶部和底部都很紧。
如果我不为绿色区域文本添加 .frame() ，我发现文本不见了，并且无法向左对齐。有什么办法可以解决这个问题吗？

Answer 1

 struct DetailViews: View {
        
        var body: some View {
            
            ZStack {
                Color.green.edgesIgnoringSafeArea(.all)
                ScrollView(.vertical, showsIndicators: false) {
                    
                    VStack(spacing: 0) {
                        VStack{
                            Text("A long Text Title")
                            Text("A long Text Title")
                            Text("A long Text Title")
                            Text("A long Text Title")
                        }
                        .frame(maxWidth: .infinity)
                        .background(Color.yellow)
                        
                        
                        
                        TabView {
                            ImageView()
                                .frame(width:UIScreen.main.bounds.size.width*0.9)
                                .cornerRadius(15)
                            ImageView()
                                .frame(width:UIScreen.main.bounds.size.width*0.9)
                                .cornerRadius(15)
                            ImageView()
                                .frame(width:UIScreen.main.bounds.size.width*0.9)
                                .cornerRadius(15)
                        }
                        .tabViewStyle(PageTabViewStyle())
                        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
                        .background(Color.red)
                        
                        TextInfoView()
                            .cornerRadius(15)
                            .padding()
                            .background(Color.blue)
                        TextInfoView()
                            .cornerRadius(15)
                            .padding()
                            .background(Color.purple)
                        
                    }
                    
                }
            }
            
        }
    }

    struct TextInfoView: View {
        var body: some View {
            VStack {
                Text("Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview. Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.")

.fixedSize(horizontal: false, vertical: true).padding()//added
            }
            .background(Color.yellow)
        }
    }

Swiftui tabview 布局问题

1 个答案: