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

Question

我正在尝试使用我的数据模型和另一个视图中的数据布置一个视图，但我正在努力调整导入视图的大小。从下图中可以看出，我在单独的视图中制作的 table 正在接管全画幅。

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

理想情况下，我想缩小 table 的大小，以便在段落和 table 之间均匀分割。此外，对于此处共享的大量代码表示歉意，但我想分享我使用过的所有格式，以防其中的某些内容阻止我获得所需的结果。

下图显示在应用分发的 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))
                    }
                }
            }
        }
    }
}

这是我创建 table:

的视图

    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 处理不同尺寸的能力。我会考虑使用几何图形 reader 并表示宽度占屏幕尺寸的百分比。

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

Resize views imported from another view - SwiftUI

xcode

view

ios

swift

swiftui