Swiftui 快捷菜单列表行布局

返回几个SwiftUI布局问题：

我试图用自定义单元格并排显示两个列表。 我创建了单元格视图（

EventRow.swift

），并在我的内容视图中显示它们

为了更好的可见性，我在列表中添加了边框

如下图所示，结果非常可怕：

我希望渐变效果应用于整个单元格，宽度和高度方面。
我尝试设置EventRow的框架（使用.infinity表示宽度和高度），但这会使应用程序崩溃。
由于EventRow的大小是推断出来的，我也不知道如何使我的行单元格高度适应它的大小：您可以看到水平分隔条不适合我的自定义EventRow

如果有人对此有什么建议，我们将不胜感激

可以找到示例项目

但我也在下面发布了我的代码：

ContentView：

import SwiftUI

struct ContentView: View {

    struct listsSetup: ViewModifier {
      func body(content: Content) -> some View {
        return content
        .frame(maxHeight: UIScreen.main.bounds.size.height/3)
        .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.blue, lineWidth: 1))
            .padding([.top, .bottom])
        }
    }

    var body: some View {

        VStack {
                HStack {
                    VStack { // 1 list Vstack
                        VStack {
                        Text("List 1")
                            .padding(.top)
                        List {
                            EventRow()
                            EventRow()
                        } // END of 1st List
                        }
                            .modifier(listsSetup())
                    } // END of 1st list VStack

                    VStack { // 2nd Vstack
                        VStack {
                        Text("List 2")
                            .padding(.top)
                        List {
                            EventRow()
                            EventRow()
                        } // END of Landings List
                        }
                        .modifier(listsSetup())
                    } // End of 2nd List VStack
                } // End of 1st & 2nd lists HStack
                    .padding(.top)
                Spacer()
        } // END of VStack
    } // END of body

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
    ContentView()
    }
}

事件行：

import SwiftUI

struct EventRow: View {

    var body: some View {
        LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .top, endPoint: .bottom)
        .edgesIgnoringSafeArea(.all)
        .overlay(
            VStack{
            HStack {
            Text("Text one")
                Spacer()
            Text("Text two")
            }
                HStack {
                    Spacer()
                    Image(systemName: "flame")
                    .font(.body)
                    Spacer()
                } // END of second HStack
                    .padding(.top, -14)
            } //END of Vstack
        )
    }
}

struct EventRow_Previews: PreviewProvider {
    static var previews: some View {
       EventRow().previewLayout(.fixed(width: 300, height: 60))

    }
}

尝试Asperi的解决方案后编辑：
我的实际EventRow代码如下所示，

listRowBackground

修饰符似乎没有任何效果：

import SwiftUI
import CoreData

struct EventRow: View {

    var event: Events

    var dateFormatter: DateFormatter {
     let formatter = DateFormatter()
    // formatter.dateStyle = .long
     formatter.dateFormat = "dd MMM yy"
     return formatter
     }

    var body: some View {
    VStack{
            HStack {
            Text(event.airportName ?? "")
                .font(.headline)
                Spacer()
            Text(self.dateFormatter.string(from: event.eventDate!))
                .font(.body)
            }
                HStack {
                    Text(event.flightNumber ?? "")
                        .font(.body)
                    Spacer()
                    if event.isSimulator {
                        Image(systemName: "s.circle")
                            .font(.body)
                    } else {
                        Image(systemName: "airplane")
                        .font(.body
                        )
                    }
                    Spacer()
                    if event.aircraftType == 0 {
                        Text("")
                        .font(.body)
                    } else if event.aircraftType == 1 {
                        Text("330")
                        .font(.body)
                    } else if event.aircraftType == 2 {
                        Text("350")
                        .font(.body)
                    }
                } // END of second HStack
                    .padding(.top, -14)

        } //END of Vstack
                .listRowBackground(LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .top, endPoint: .bottom))

    }
}

struct EventRow_Previews: PreviewProvider {
    static var previews: some View {
        let context = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext

                let newEvent = Events(context: context)
                newEvent.eventDate = Date()
                newEvent.aircraftType = 1
                newEvent.airportName = "LDG tst"
                newEvent.flightNumber = "AF TEST"
                newEvent.id = UUID()
                newEvent.isLanding = true
                newEvent.isSimulator = false

        return EventRow(event: newEvent).environment(\.managedObjectContext, context)
        .previewLayout(.fixed(width: 300, height: 60))

    }
}

---

下面是一个使渐变行变宽的解决方案

---

阿斯佩里又来营救了！谢谢，很有魅力。有趣的是，contentView预览仍然显示我以前的布局，但在sim卡或车载设备上，结果非常完美。尝试将此应用到我的实际项目中，但它似乎不起作用。我的实际EventRow文件从核心数据实体提取其信息，但我怀疑这是问题所在。当我接近10项限制时，尝试对元素进行分组，但没有帮助。将相应地编辑我的问题…在问题按假设回答后更改问题是不好的做法。一个问题一个答案。Bug不会改变行为，这是另一个Bug-另一个故事。Asperi很抱歉，但这是我发现发布更多代码的唯一方法。评论部分似乎不适合这样做。由于该问题与我的前一个问题密切相关，我认为后续问题比全新问题更好。好的，在ForEach循环tat填充我的列表后，通过应用.listRowBackround修饰符ContentView实现了这一点。当列表由循环填充时，将修改器应用于EventRow视图本身似乎不起作用。谢谢你指向修饰符@Asari的指针，我花了好几天才找到它！

struct EventRow: View {

    var body: some View {
        VStack{
            HStack {
                Text("Text one")
                Spacer()
                Text("Text two")
            }
            HStack {
                Spacer()
                Image(systemName: "flame")
                    .font(.body)
                Spacer()
            } // END of second HStack
                .padding(.top, -14)
        } //END of Vstack
        .listRowBackground(LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .top, endPoint: .bottom)
        )
    }
}