SwiftUI 列表部分的圆角和边框

Question

我想在 SwiftUI 中创建以下设计。我目前正在使用一个列表并创建一个包含这样的单元格的部分。

List {
    Section {
        ForEach(titles) { title in
            Cell(title: title)
        }
    }
}

当我将边框等修饰符应用于该部分时，它会将其应用于该部分中包含的所有视图。我希望在整个部分周围有一个圆角半径为 10 的边框。最接近创建所需设计的方法是不使用列表，而是使用 VStack 并应用以下修改器

VStack {
    ForEach(titles) { title in
        Cell(title: title)
    }
}
.overlay(RoundedRectangle(cornerRadius: 10)
            .stroke(.gray, lineWidth: 2))

然而我发现这不是一个聪明的方法，因为列表使用可重用的单元，而在 VStack 的情况下则不使用。是否可以使用 SwiftUI 中的列表创建所需的设计？我不想选择 Apple 提供的默认列表样式

Answer 1

只需复制粘贴此代码并根据您的需要进行自定义，即可享受

import SwiftUI

struct CustomizeListView: View {

var titles = ["First Section" : ["Manage your workout", "View recorded workouts", "Weight tracker", "Mediation"], "Second Section" : ["Your workout", "Recorded workouts", "Tracker", "Mediations"]]


var body: some View {
    List {
        ForEach(titles.keys.sorted(by: <), id: \.self){ key in
            Section(key) {
                VStack(alignment: .leading, spacing: 0){
                    ForEach(titles[key]!, id: \.self) { title in
                        HStack{
                            Text(title)
                            Spacer()
                            Image(systemName: "arrow.right")
                        }//: HSTACK
                        .padding(20)
                        Divider()
                    }//: LOOP
                }//: VSTACK
                .overlay(
                    RoundedRectangle(cornerRadius: 10, style: .circular).stroke(Color(uiColor: .tertiaryLabel), lineWidth: 1)
                )
                .foregroundColor(Color(uiColor: .tertiaryLabel))
            }//: SECTION
        }//: LOOP
    }//: LIST
    .listStyle(InsetListStyle())
}
}

struct CustomizeListView_Previews: PreviewProvider {
static var previews: some View {
    CustomizeListView()
}
}