调整从另一个视图导入的视图大小 - SwiftUI

Question

我正在尝试使用来自我的数据模型和另一个视图的数据来布置视图，但我正在努力调整导入视图的大小。正如您在表格下方的图片中看到的那样，我在单独的视图中制作的图片正在接管全画幅。

我试图在我的主视图中调整它的大小，我将所有东西放在一起但没有运气。我也尝试过 scaleEffect 修饰符，但它只会缩放视图中的内容并保持视图边界区域的比例相同。

理想情况下，我想缩小表格的大小，使段落和表格之间的分割均匀。另外，对于此处共享的大量代码表示歉意，但我想分享我使用过的所有格式，以防有什么东西阻止我得到想要的结果。

下图显示在分发应用程序的 iPad 上。

这是我将所有数据汇总在一起的地方：

  struct Tab1Section08: View {
    
    var product: ProductModel
    let frameHeight: CGFloat = 900
    let title = "This is a title"
    let subtitle = "This is a subtitle"
    let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    
    struct Tab1Section08: View {
    let frameHeight: CGFloat = 900
    let title = "This is a title"
    let subtitle = "This is a subtitle"
    let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    
    var body: some View {
        ZStack{
            Color(red: 0.97, green: 0.97, blue: 0.97)
                .ignoresSafeArea()
                .frame(height: frameHeight)
            VStack {
                Text(title)
                    .font(.custom("Avenir-Black", size: 30))
                    .padding(.top, 60)
                    .padding(.bottom, 20)
                HStack{
                    VStack {
                        Text(subtitle)
                            .font(.custom("Avenir-Black", size: 20))
                        Text(paragraph)
                            .font(.custom("Avenir", size: 16))
                            .multilineTextAlignment(.center)
                            .fixedSize(horizontal: false, vertical: true)
                            .lineSpacing(10)
                            .padding(.bottom, 20)
                    }
                    VStack {
                        Tab1Section08ListRow()
                            .padding(.bottom, 20)
                        Text(subtitle)
                            .font(.custom("Avenir", size: 12))
                    }
                }
            }
        }
    }
}

这是我正在创建表格的视图：

    struct Tab1Section08ListRow: View {
        
        let color: Color = .gray
        let width: CGFloat = 1
        let textPadding: CGFloat = 5
        let frameWidth: CGFloat = 250
        let amount: CGFloat = 3
        let title = ["first", "second","third"]
        let columns = ["first", "second", "third", "fourth", "fifth", "sixth"]
        
        var body: some View {
            let height: CGFloat = CGFloat(title.count)*40
            VStack {
                HStack{
                    ForEach(0..<title.count, id: \.self) { item in
                        Text(title[item])
                            .font(.custom("Avenir-Heavy", size: 18))
                            .fontWeight(.bold)
                            .frame(width: frameWidth)
                            .padding(.bottom, 20)
                    }
                }
                HStack{
                    VStack(alignment: .leading) {
                        ForEach(0..<columns.count, id: \.self) { item in
                            Text(columns[item])
                                .font(.custom("Avenir", size: 14))
                                .foregroundColor(.secondary)
                                .frame(width: frameWidth)
                                .padding(.bottom, textPadding)
                                .padding(.top, textPadding)
                        }
                    }
                    Rectangle()
                        .fill(color)
                        .frame(width: width, height: height)
                        .edgesIgnoringSafeArea(.vertical)
                    VStack(alignment: .leading) {
                        ForEach(0..<columns.count, id: \.self) { item in
                            Text(columns[item])
                                .font(.custom("Avenir", size: 14))
                                .foregroundColor(.secondary)
                                .frame(width: frameWidth)
                                .padding(.bottom, textPadding)
                                .padding(.top, textPadding)
                        }
                    }
                    Rectangle()
                        .fill(color)
                        .frame(width: width, height: height)
                        .edgesIgnoringSafeArea(.vertical)
                    VStack(alignment: .leading) {
                        ForEach(0..<columns.count, id: \.self) { item in
                            Text(columns[item])
                                .font(.custom("Avenir", size: 14))
                                .foregroundColor(.secondary)
                                .frame(width: frameWidth)
                                .padding(.bottom, textPadding)
                                .padding(.top, textPadding)
                        }
                    }
                }
            }
        }
    }

Answer 1

我从一开始就怀疑是你的固定框架。如果我注释掉.frame(width: frameWidth)，视图就会崩溃，从而为您的“lorem ipsum”视图提供更多空间。 与.frame(width: frameWidth)：

并且没有：

像这样的硬编码框架会破坏 SwiftUI 处理不同尺寸的能力。我会考虑使用几何阅读器并将宽度表示为屏幕大小的百分比。