Listview 列表式快捷界面

如何制作像图中那样的列表？ （编辑：列表标题）

以下是我尝试过的-列表和表格：

NavigationView {
    VStack {
        List { // or Form here
            // Text("New") <- this also isn't it
            Section(header: Text("New")) {
                ForEach(... ... .indices, id: \.self) { index in
                    ...
                    ...
                }
            }
            
            Section(header: Text("Done")) {
                ForEach(...) { ...
                    ...
                }
            }
     }
}
            // On the pictures below - `List` on the left; `Form` on the right

NavigationView{
VStack{
在此处列出{//或表单
//Text（“New”）它看起来像一个带有节的表单，节标题可以配置（如下所示），行内容可以根据需要组合


编辑：
.textCase（.none）
允许源文本大写“Xxxx”

这是一个使用滚动视图、自定义分区和自定义列表项的解决方案。每个分区都有自己的标题、颜色和总计。每个项目都有一个图标、标签和切换。切换按钮可以从分区总计中添加或删除项目的价格

[]

struct CustomListSectionView:视图{
@ObservedObject变量listSection:CustomListSection
var body：一些观点{
VStack（间距：0）{
海德尔维
.填充（8）
列表框
.padding（）
.背景（圆角反射角（角半径：25.0）.前底色（.白色））
.padding（.卧式）
页脚视图
.填充（8）
}
.背景（颜色.次要）
}
var headerView：一些观点{
HStack{
文本（listSection.header）
.font（.system（大小：24，重量：中等，设计：四舍五入））
.foregroundColor（.primary）
垫片（）
}
}
var listView：一些视图{
VStack（间距：3）{
ForEach（数组（listSection.items.enumerated（）），id:\.offset）{索引，中的项
CustomListItemView（颜色：listSection.color）.environmentObject（项目）
如果索引NumberFormatter{
让currencyFormatter=NumberFormatter（）
currencyFormatter.locale=locale.current
currencyFormatter.numberStyle=.currency
currencyFormatter.usesGroupingSeparator=true
返回电流格式化程序
}
}
结构CustomListItemView:视图{
@EnvironmentObject变量listItem:CustomListItem
让颜色：颜色
var body：一些观点{
HStack{
ZStack{
图像（系统名称：listItem.symbol）
.font（.headline）
.foregroundColor（.白色。不透明度（0.8））
.填充（6）
.background（圆圈（）.foregroundColor（颜色））
}
.阴影（半径：3）
文本（listItem.name）
垫片（）
按钮（操作：{listItem.select.toggle（）}）{
图像（系统名称：listItem.select？“largecircle.fill.circle”：“circle”）
.foregroundColor（.accentColor）
.填充（6）
}.buttonStyle（PlainButtonStyle（））
}
}
}
类CustomListSection:ObservableObject，可哈希{
//hashable so id:\.ForEach中的self-work
设id=UUID（）
let头：字符串
让颜色：颜色
@已发布的变量项：[CustomListItem]=[]
@已发布变量总计：双精度=0
func add（uu名称：String，uuu符号：String，uu金额：Double）{
items.append（CustomListItem（名称、符号、金额、计算））
}
func计算（）{
total=items.map（{$0.price}）.reduce（0，+）
}
init（uu头：字符串，uu颜色：颜色）{
self.header=header
self.color=颜色
}
公共func散列（放入散列程序：inout散列程序）{
hasher.combine（id）
}
静态func==（lhs:CustomListSection，rhs:CustomListSection）->Bool{
lhs.id==rhs.id
}
}
类CustomListItem:ObservableObject，可散列{
@已发布的变量选择：Bool=false{didSet{
带动画{calc（）}
} }
let name:String
让符号：字符串
@已发布风险值金额：双倍
让calc:（）->Void
init（u名称：String，uu符号：String，u金额：Double，u计算：@escaping（）->Void）{
self.name=名称
self.symbol=symbol
self.amount=金额
self.calc=calc
}
var价格：双{选择？金额：0}
//hashable so id:\.ForEach中的self-work
设id=UUID（）
公共func散列（放入散列程序：inout散列程序）{
hasher.combine（id）
}
静态函数==（lhs:CustomListItem，rhs:CustomListItem）->Bool{
lhs.id==rhs.id
}
}
结构CustomListSectionView\u预览：PreviewProvider{
静态var预览：一些视图{
let section=CustomListSection（“节名，.purple”）
第节添加（“字母项目”，“a.圆圈”，1000）
第节添加（“增量项”、“d.circle”，100）
第节添加（“ω项目”、“z圆”，1）
返回CustomListSectionView（listSection:section）
}
}
也许你知道如何将其从灰色和所有字母的一个高度改为照片上的标题样式吗？我不认为这些标题是章节标题。这看起来像两个单独的列表，标题完全分开！都是一个高度。我在看如何做“新建”，而不是“新建”。下面是有效的方法：
章节（标题：Text（“New”）.bold（）.font（.title）.textCase（.none）.foregroundColor（.black））
…
。textCase（.none）
解决了大小写问题。
NavigationView {
    Form {
        Section(header: Text("New").bold().font(.title).foregroundColor(.black)) {

Section(header: Text("New").bold().font(.title).textCase(.none).foregroundColor(.black))

struct CustomListSectionView: View {
    @ObservedObject var listSection : CustomListSection

    var body: some View {
        VStack(spacing: 0) {
            headerView
                .padding(8)
            listView
                .padding()
                .background(RoundedRectangle(cornerRadius: 25.0).foregroundColor(.white))
                .padding(.horizontal)
            footerView
                .padding(8)
        }
        .background(Color.secondary)
    }
    
    var headerView : some View {
        HStack {
            Text(listSection.header)
                .font(.system(size: 24, weight: .medium, design: .rounded))
                .foregroundColor(.primary)
            Spacer()
        }
    }
    
    var listView : some View {
        VStack(spacing: 3) {
            ForEach(Array(listSection.items.enumerated()), id: \.offset) { index, item in
                CustomListItemView(color: listSection.color).environmentObject(item)
                if index < listSection.items.count - 1 {
                    Divider()
                }
            }
        }
    }

    var footerView : some View {
        HStack {
            Spacer()
            Text("Sum:")
                .font(.system(size: 18, weight: .semibold, design: .rounded))
                .foregroundColor(.secondary)
            Text(CustomListSectionView.formatter().string(from: NSNumber(value: listSection.total)) ?? "-")
                .font(.system(size: 18, weight: .medium, design: .rounded).monospacedDigit())
                .foregroundColor(.primary)
        }
    }
    
    static func formatter() -> NumberFormatter {
        let currencyFormatter = NumberFormatter()
        currencyFormatter.locale = Locale.current
        currencyFormatter.numberStyle = .currency
        currencyFormatter.usesGroupingSeparator = true
        return currencyFormatter
    }
}

struct CustomListItemView: View {
    @EnvironmentObject var listItem : CustomListItem
    let color : Color
    
    var body: some View {
        HStack {
            ZStack {
                Image(systemName: listItem.symbol)
                    .font(.headline)
                    .foregroundColor(.white.opacity(0.8))
                    .padding(6)
                    .background(Circle().foregroundColor(color))
            }
            .shadow(radius: 3)
            Text(listItem.name)
            Spacer()
            Button(action: { listItem.select.toggle() }) {
                Image(systemName: listItem.select ? "largecircle.fill.circle" : "circle")
                    .foregroundColor(.accentColor)
                    .padding(6)
            }.buttonStyle(PlainButtonStyle())
        }
    }
}

class CustomListSection: ObservableObject, Hashable {
    // hashable so id: \.self work in ForEach's
    let id = UUID()
    let header : String
    let color : Color
    @Published var items : [CustomListItem] = []
    @Published var total : Double = 0
    
    func add(_ name: String, _ symbol: String, _ amount: Double) {
        items.append(CustomListItem(name, symbol, amount, calc))
    }
    
    func calc() {
        total = items.map({ $0.price }).reduce(0, +)
    }
    
    init(_ header: String, _ color: Color) {
        self.header = header
        self.color = color
    }
    
    public func hash(into hasher: inout Hasher) {
            hasher.combine(id)
    }
    
    static func == (lhs: CustomListSection, rhs: CustomListSection) -> Bool {
        lhs.id == rhs.id
    }
}

class CustomListItem: ObservableObject, Hashable {
    @Published var select : Bool = false { didSet {
        withAnimation { calc() }
    } }
    let name : String
    let symbol : String
    @Published var amount : Double
    let calc : () -> Void

    init(_ name: String, _ symbol: String, _ amount: Double, _ calc: @escaping () -> Void) {
        self.name = name
        self.symbol = symbol
        self.amount = amount
        self.calc = calc
    }

    var price : Double { select ? amount : 0 }
    
    // hashable so id: \.self work in ForEach's
    let id = UUID()

    public func hash(into hasher: inout Hasher) {
            hasher.combine(id)
    }
    
    static func == (lhs: CustomListItem, rhs: CustomListItem) -> Bool {
        lhs.id == rhs.id
    }
}

struct CustomListSectionView_Previews: PreviewProvider {
    static var previews: some View {
        let section = CustomListSection("Section Name", .purple)
        section.add("Alpha Item", "a.circle", 1000)
        section.add("Delta Item", "d.circle", 100)
        section.add("Omega Item", "z.circle", 1)
        return CustomListSectionView(listSection: section)
    }
}