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

如何解决如何在 SwiftUI 中的表单部分周围制作彩色笔划线

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

我正在尝试在 SwiftUI 中的表单部分周围创建彩色笔划线。

我的第一次试用是使用 .background，如下所示：

（但这不起作用，因为它包围了 Section-items 的每一行而不是整个 Form-Section）

    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)
            )
        }
    }
}

解决方法

你可以试试这样的：

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))
            }
        }
    }
}