如何在具有正确行高的情况下在列表的提取 RowView 中使用 GeometryReader？

Question

我需要使用 GeometryReader 根据屏幕宽度调整视图大小。这是我重构之前的情况。（放大图片以查看代码并并排预览）。

代码在这里：

import SwiftUI

struct WorkingView: View {
    var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping", "Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]
    
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                List {
                    ForEach(data, id: \.self) { content in
                        HStack {
                            Text(String(content.count))
                                .frame(width: geometry.size.width * 0.10)
                            VStack {
                                Text(content)
                                    .underline()
                                Text(content)
                                    .bold()
                                Text(content)
                                    .foregroundColor(.yellow)
                            }
                        }
                    }
                }
                .navigationTitle(Text("Home"))
            }
        }
    }
}

---

这是我将行重构为提取的视图后得到的结果。现在，当在这里使用 GeometryReader 时，行高变得混乱。

import SwiftUI

struct NotWorkingView: View {
    var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping", "Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(data, id: \.self) { content in
                    GeometryReader { geometry in
                        NotWorkingRowView(content: content)
                    }
                }
            }
            .navigationTitle(Text("Home"))
        }
    }
}

struct NotWorkingRowView: View {
    var content: String
    var body: some View {
        VStack {
            GeometryReader { geometry in
                HStack {
                    Text(String(content.count))
                        .frame(width: geometry.size.width * 0.10)
                    VStack {
                        Text(content)
                            .underline()
                        Text(content)
                            .bold()
                        Text(content)
                            .foregroundColor(.yellow)
                    }
                }
            }
        }
    }
}

这是一个简化版本，我提取的子视图本身相当大。但由于它需要屏幕宽度来调整子视图的大小，因此我必须使用 GeometryReader。

当我将其提取到子视图中时，是什么弄乱了行高？

Answer 1

您可以将 GeometryReader 放在顶层并将其获得的宽度传递给 NotWorkingRowView。像这样的东西：

struct NotWorkingView: View {
    var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping", "Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]

    var body: some View {
        NavigationView {
            GeometryReader { geometry in. // <- Move Geometry reader here
                List {
                    ForEach(data, id: \.self) { content in
                        NotWorkingRowView(content: content, 
                                          width: geometry.size.width) // <- Pass width
                    }
                }
            }
            .navigationTitle(Text("Home"))
        }
    }
}

然后你可以像这样使用行内的宽度：

struct NotWorkingRowView: View {

    var content: String
    var width: CGFloat

    var body: some View {
        VStack {
            HStack {
                Text(String(content.count))
                    .frame(width: width * 0.10) // <- use the width you passed here
                VStack(alignment: .leading) {
                    Text(content)
                        .underline()
                    Text(content)
                        .bold()
                    Text(content)
                        .foregroundColor(.yellow)
                }
            }
        }
    }
}

屏幕上给出以下结果：

在 iOS 14.3 上的 Xcode 12.3 中测试