SwiftUI的ListView

lingjunjie

于 2024-03-14 15:10:52 发布

阅读量419

点赞数 6

分类专栏： swiftUI 文章标签： swiftui ios swift

本文链接：https://blog.csdn.net/lingjunjie/article/details/136711529

版权

swiftUI 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

本文介绍了如何在SwiftUI中使用ListView展示水果和蔬菜列表，包括配置Section、ForEach循环、删除和移动功能，以及自定义添加按钮和accentColor。

摘要由CSDN通过智能技术生成

SwiftUI的ListView

记录下ListView的一些基础配置


import SwiftUI

struct ListviewBootCamp: View {
    @State var fruits = ["aple", "orange", "banana", "peach"]
    @State var veggies = ["tomato", "potato", "carrot",]
    
    var body: some View {
        NavigationView(content: {
            List {
                Section(
                    header: HStack {
                        Text("Fuirts")
                        Image(systemName: "flame.fill")
                    }
                        .font(.title3)
                        .foregroundColor(.purple)
                ) {
                    ForEach(fruits, id: \.self) { fruits in
                        /// 首字母大写
                        Text(fruits.capitalized)
                            .font(.caption)
                            .foregroundColor(.white)
                            .padding(.vertical)
                            
                    }
                    .onDelete(perform: delete)
                    .onMove(perform: move)
                    .listRowBackground(Color.green)
                }
                
                Section(
                    header: Text("veggies".capitalized)) {
                    ForEach(fruits, id: \.self) { fruits in
                        /// 首字母大写
                        Text(fruits.capitalized)
                    }
                }
            }
            /// 列表样式
//            .listStyle(DefaultListStyle())
//            .listStyle(GroupedListStyle())
//            .listStyle(InsetListStyle())
//            .listStyle(PlainListStyle())
            .listStyle(SidebarListStyle())
//            .listStyle(InsetGroupedListStyle())
//            .listStyle(GroupedListStyle())
            .navigationTitle("ListviewBootCamp")
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarItems(leading: EditButton(),
                                trailing: addButton
            )
        }
        
        ) 
        /// 强调按钮颜色
        .accentColor(.red)
       
    }
    
    var addButton: some View {
        Button("Add", action: {
            add()
        })
    }
    
    func delete(indexSet: IndexSet) {
        fruits.remove(atOffsets: indexSet)
        print("delete: \(fruits)")
    }
    
    func move(indices: IndexSet, newOffset: Int) {
        self.fruits.move(fromOffsets: indices, toOffset: newOffset)
        print("delete: \(fruits)")
    }
    
    func add() {
        fruits.append("watermelon")
    }
}

#Preview {
    ListviewBootCamp()
}