調整從另一個視圖導入的視圖大小 - SwiftUI

Question

我正在嘗試使用我的數據 model 和另一個視圖中的數據布置視圖，但我正在努力調整導入視圖的大小。 正如您從表格下方的圖像中看到的那樣，我在單獨的視圖中制作的圖像正在接管全畫幅。

我試圖在我的主視圖中調整它的大小，我將所有東西放在一起但沒有運氣。 我也嘗試了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 處理不同大小的能力相混淆。 我會考慮使用幾何閱讀器並將寬度表示為屏幕尺寸的百分比。