如何在 SwiftUI 中的表单部分周围制作彩色描边线

Question

使用Swift-5.4、iOS14.5、XCode12.5，

我正在尝试在 SwiftUI 中的表单部分周围创建一条彩色描边线。

我的第一次尝试是使用

.background

，如下所示：

（但这不起作用，因为它包围了部分项目的每一行而不是整个表单部分）

    Form {
        Section(header: Text("Section 1")) {

        }
        .background(
            RoundedRectangle(cornerRadius: 16)
            .stroke(Color.yellow, lineWidth: 2)
        )
    }

我的第二次试验是使用

.overlay

，如下所示：

（但同样的错误 - 这不起作用）

    Form {
        Section(header: Text("Section 2")) {

        }
        .overlay(
            RoundedRectangle(cornerRadius: 16)
            .stroke(Color.yellow, lineWidth: 2)
        )
    }

如何才能在表格部分周围出现黄线？

出于完整性原因，这是我的整个表格：

struct MyView: View {        
    
    var body: some View {
        
        Form {
            Section(header: Text("Section 1")) {
                HStack {
                    Text("Title 1.1")
                        .foregroundColor(Color(.label))
                    Spacer()
                    Text("Text 1.1")
                        .lineLimit(1)
                        .foregroundColor(Color(.label))
                }
                HStack {
                    Text("Title 1.2")
                        .foregroundColor(Color(.label))
                    Spacer()
                    Text("Text 1.2")
                        .lineLimit(1)
                        .foregroundColor(Color(.label))
                }
                HStack {
                    Text("Title 1.3")
                        .foregroundColor(Color(.label))
                    Spacer()
                    Text("Text 1.3")
                        .lineLimit(1)
                        .foregroundColor(Color(.label))
                }
            }
            .background(
                RoundedRectangle(cornerRadius: 16)
                .stroke(Color.yellow, lineWidth: 2)
            )

            Section(header: Text("Section 2")) {
                HStack {
                    Text("Title 2.1")
                        .foregroundColor(Color(.label))
                    Spacer()
                    Text("Text 2.1")
                        .lineLimit(1)
                        .foregroundColor(Color(.label))
                }
                HStack {
                    Text("Title 2.2")
                        .foregroundColor(Color(.label))
                    Spacer()
                    Text("Text 2.2")
                        .lineLimit(1)
                        .foregroundColor(Color(.label))
                }
                HStack {
                    Text("Title 2.3")
                        .foregroundColor(Color(.label))
                    Spacer()
                    Text("Text 2.3")
                        .lineLimit(1)
                        .foregroundColor(Color(.label))
                }
            }
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                .stroke(Color.yellow, lineWidth: 2)
            )
        }
    }
}

Answer 1

你可以尝试这样的事情：

struct MyView: View {
    var body: some View {
        Form {
            Section(header: Text("Section 1")) {
                VStack {
                    HStack {
                        Text("Title 1.1")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 1.1")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                    HStack {
                        Text("Title 1.2")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 1.2")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                    HStack {
                        Text("Title 1.3")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 1.3")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                }.padding(8).overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.yellow, lineWidth: 2))
            }
            
            Section(header: Text("Section 2")) {
                VStack {
                    HStack {
                        Text("Title 2.1")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 2.1")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                    HStack {
                        Text("Title 2.2")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 2.2")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                    HStack {
                        Text("Title 2.3")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 2.3")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                }.padding(8).overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.yellow, lineWidth: 2))
            }
        }
    }
}

Answer 2

这对我有用

struct MyView: View {
    var body: some View {
        Form {
            Section(header: Text("Section 1")) {
                VStack {
                    HStack {
                        Text("Title 1.1")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 1.1")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                    HStack {
                        Text("Title 1.2")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 1.2")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                    HStack {
                        Text("Title 1.3")
                            .foregroundColor(Color(.label))
                        Spacer()
                        Text("Text 1.3")
                            .lineLimit(1)
                            .foregroundColor(Color(.label))
                    }
                }
            }
            .listRowBackground(RoundedRectangle(cornerRadius: 10)
                .stroke(Color.red, lineWidth: 2)
                .background(Color.yellow))
        }
    }
}