SwiftUI教程(五)使用List创建列表应用程序

持续创作,加快生长!这是我参加「日新计划 6 月更文应战」的第30天,点击查看活动概况

SwiftUI教程系列文章汇总

经过构建经典的待办事项运用程序来学习List、NavigationView的运用。完结动态填充List、编辑List、增加Item、界面导航功用。

主要内容:

  1. 填充列表
  2. 导航
  3. 编辑列表
  4. 生成新的项

1. 填充列表

1.1 创立列表

要拥有一个显现待办事项列表的qq输入框List视图,请在ContentView中的输入框样式代码输入以下指令:

var body: some View {
    List{
        HStack{ Image("work").resizable().frame(width: 50, height: 50)
            Text("Write SwiftUI book")
        }
        HStack{ Image("personal").resizable().frame(width: 50, height: 50)
            Text("Read Bible")
        }
        HStack{ Image("family").resizable().frame(width: 50, height: 50)
            Text("Bring kids out to play")
        }
        HStack{ Image("family").resizable().frame(width: 50, height: 50)
            Text("Fetch wife")
        }
        HStack{ Image("family").resizable().frame(width: 50, height: 50)
            Text("Call mum")
        }
    }
}

阐明:

  • 经过Listswift是什么组织缩写增加多行数据,
  • 每一行包括一个图画和一个水平文本,经过HStack来包装
  • 由于图画巨细不同,大ios模拟器的图画会被扩展,除了屏幕巨细,只显现了一部分。为了解决这个问题,咱们运用. resizable修改器使图画适合于运用面积。
  • 然后运用.frame修饰符将图画的巨细限制为一个自界说的结构。

1.2 动态增加列表

目前,咱们有一个静态变量的定义列表视图,其中有5变量值个固定的数据。现在咱们需要动态增加列表视图,因而现在将数据存储到一个数组中,之后拿出值填充每索引一行。

由于现在每一行都包括一个类别和一个文本,此时需要创变量的定义立一个结构体来存储它们。 结构体答应咱们创立多个值组成的复杂数据类型。

然后,咱们可以创立该结构的实例并填充值,在代码中传递这些值。

1.2.1 界说一个Todo结构类型

struct Todo {
    let name: String 
    let category: String 
}

阐明:

  • 咱们界说了一个Todo结构类型,它包括两个特点:称号和类别ios越狱

1.2.2 todos状况数组:

在ContentView.swi输入框的英文ft中声明Todo结构体的状况数组

@State private var todos = [
    Todo(name:"Write SwiftUI book",category: "work"), 
    Todo(name:"Read Bible",category: "personal"),
    Todo(name:"Bring kids out to play",category: "family"), 
    Todo(name:"Fetch wife",category: "family"), 
    Todo(name:"family",category: "Call mum") 
]

阐明:

  • 咱们运用一个状况变量todos数组,以便List视图中的项可以动态更新。
  • 这儿创立好每一项数据的数组,之后经过数组动态更新。
  • 留意Swift是怎么ios应用商店让创立Todo结构体的实例变得简单的。咱们只需传入称号和类别的初始值。

1.2.3 Lis索引t动态显现数组数据

var body: some View {
    List{ 
        ForEach(todos, id:.name){ (todo) in 
            HStack{ 
                Image(todo.category) .resizable().frame(width: 50, height: 50)
                Text(todo.name) 
            } 
        } 
    } 
}

阐明:

  • 在List视图中,咱们运用ForEach,它接纳一个数组,然后创立多个子视图。
  • 咱们有必要供给id来仅有标识每一项。现在,咱们供给.name来运用todo称号作为每一行的标识符。
  • 当预览运用程序时,它显现的内容应该是要和曾经一样的,只是这一次,将以编程方法填充行。

1.2.4 ID标识

上面是经过itme的称号来标识todo项的,现在,如果咱们有多个称号相输入框不显示同的todo项,该怎么办?ios下载 如果有多个称号相同的待办事项,这输入框的英文将导ios越狱致当咱们企图删去行,列表视图会由于有多个相同称号的cell而不知道的要删去哪一行。为了解决这个问题,咱们将增加一个仅有的标识符到Todo结构体js输入框

struct Todo: Identifiable {
    let id = UUID() 
    let name: String 
    let category: String 
}
  • 运用id来仅有标识一个item,这索引页是哪一页儿运用UUID()函数来生成一个随机标识符
  • 此时咱们便是不需要手动设置iios越狱d了。List视图将会主动运用id作为每行的标识符

2. 导航

接下来,咱们将完结一个待索引失效办事项详细信息界面。即当用户点击一个待办事项,咱们会跳转到一个独自的待办事项详细信息索引图界面。 咱们经过将咱们的List包装在一个Nswift是什么组织缩写avigationView中来完结这一点。

2.1 导航页面

代码:

var body: some View {
    NavigationView{ 
        List{
            ForEach(todos, id:.name){ (todo) in 
                … 
            } 
        }.navigationBarTitle("Todo Items") 
    } 
}

阐明:

  • 运用navigationBarTitle办法swifter给控件设置导航栏的标题
  • 变量与函数意navigationBarTitle修饰符属于列表视图swifter,而不是导航视图。
  • 这是由于导航视图从右边经过push来显现新界面
  • 每个界面都有自己swiftly的标题。如果标题是附加到导航视图ios越狱,标索引是什么意思题就被固定了。
  • 经过附加的标题到导航视图的里边内容,标题可以更改为其内容的变化。

2.2 导航跳转

经过NavigationView包装的List视图答应咱们在点击一行时导航到待办事项界面上。 咱们可以输入框测试用例经过给NavigationLink函数包装row it索引是什么意思em来导航到概况界面:

NavigationView{
    List{
        ForEach(todos, id:.name){ (todo) in 
            NavigationLink(destination: 
                VStack{
                     Text(todo.name) 
                     Image(todo.category) 
                         .resizable() 
                         .frame(width: 200, height: 200) 
                 } 
             ){ 
                HStack{
                     … 
                } 
            } 
         } 
     }.navigationBarTitle("Todo Items") 
 }

阐明:

  • 留意,咱们有必要向NavigationLin变量之间的关系k供给一输入框测试用例个参数destinaswiftlytion,也便是点击项目时显现的视图。
  • 这儿代码中可以看到,视图将包括:T索引的优缺点ext和Image
  • 当运转运用ios16程序,点击一个item就会跳转到另一个界面,界面输入框变小了怎么恢复显现挑选的项目的详细信息。
  • 新界面的顶部栏也会显现带有变量名上一个项目的符号

3. 编辑列表

3.1 删去项

在iOS中,要删去特定的行,咱们通常向左滑动到显现一行上显现的Delete按钮。

要启用此功用,咱们需要在控件结尾增加.onDelete()ios系统修饰符

.onDelete(perform: { indexSet in todos.remove(atOffsets: indexSet) })//加给单个item的

阐明:

  • onjs输入框Delet索引是什么意思e供给了一个indexSet参数,它包括了ForEach视图中的项的位变量值置。供咱们查找变量泵删去项
  • 咱们将indexSet传递给todos的remove函数来删去特定的行。

3.2 重索引图新安排行

控件答应用ios模拟器户重新排列List视图中的行,在ForEach视图结尾设置. onmove()修饰符。

NavigationView{
    List{
        ...
        }
        .onDelete(perform: { indexSet in todos.remove(atOffsets: indexSet) })//加给单个item的
        .onMove(perform: { indices, newOffset in 
        todos.move(fromOffsets: indices, toOffset: newOffset) 
        })
    }
    .navigationBarTitle("Todo Items")
    .navigationBarItems(trailing: EditButton())
}

阐明:

  1. .navigationBiOSarItems(输入框不显示trailing: EditButton())给list增加编辑按钮
  2. onMove供给变量泵了索引参数fromOffsets和toOffset参数,从开始位置移动到新位置
  3. 直接将数组输入框的英文todos进行move操作,传入位置参数即可
  4. 只要当用户输入“Edit”形式时才干移动项目。因而,咱们需要在导航栏中增加一个EditButton按钮,当用户点击“编辑”时,就可以持续移动了
  5. 别的,在Edit形式下,每swiftly个项目都显现一个Delete按钮,用户可以经过点击它快速删去项目。这是在编辑形式下主动启用输入框不显示,咱们不需要增加任何代码!

结果:

SwiftUI教程(五)运用List创立列表运用程序

4. 生成新的项

4.1 增加Add项

为了向List视图增加行,咱们向todos数组中增加了一个新的todo项。

.navigationBarItems(
    leading: Button(action: addTodo,
    label: {
        Text("Add")
    }),
    trailing: EditButton()
)
  • 咱们将在NavigationViios系统ew左上角增加一个导航栏按钮项,用于增加待办事项:
  • 咱们有必要在按钮的动作中指定一ios系统个函数来增加一个新的待办事项对待办事项。变量泵
  • 完结addTodo函数用于增加item

4.2 创立AddTodoVie变量英语w

咱们当时的新待办事项的称号和类别硬编码为” newTodo “和” work “,实际开发中是不会这样的,

因而,现在注释掉addTodo()函数,专门创立AddTodoView,之后经过ContentView来呈现的AddTodoView,供用户增加待办事项,这样就可以由用户来自变量名界说增加爱办事项的具体内容。

struct AddTodoView: View {
    var body: some View {
        Text("Add Todo view")
    }
}
  • 设置有一个状况变量showAddTodoView来决定是否显现AddTodoView。它最初默以为false(不显现)。
@State private var showAddTodoView = false
.navigationBarItems(
    leading: Button(action: {
        self.showAddTodoView.toggle()
    },
    label: {
        Text("Add")
    }).sheet(isPresented: $showAddTodoView){
        AddTodoView()
    },
    trailing: EditButton()
)

阐明:

  1. 在按钮的动作中,咱们调用showAddTodo变量名的命名规则View的toggle()来进行ios应用商店切换
  2. 要显现sheet,咱们运用sheet修饰符,变量类型有哪些并将其附加到按钮上。
  3. 咱们将showAddTodoView状况变量绑定到.sheet()修索引失效的几种情况饰符的参数。
  4. 当如果showAddTodoView为true,则显现sheet
  • 用户可以向下拖动作业表来封闭它。
  • 但在咱们的案例中,咱们希望有两个文本字段swiftly和一个Add按钮,
  • 当单击按钮时,以编程方法退出界面。

4.3 @Binding

咱们首要增加一个Button视图和一个绑定到AddTodoView中的绑定变量showAddTodoView

代码:

.navigationBarItems(
    leading: Button(action: {
        self.showAddTodoView.toggle()
    },
    label: {
        Text("Add")
    }).sheet(isPresented: $showAddTodoView){
        AddTodoView(showAddTodoView: self.$showAddTodoView )
    },
    trailing: EditButton()
)
struct AddTodoView: View {
    @Binding var showAddTodoView: Bool
    var body: some View {
        Text("Add Todo view")
        Button(action: {
            self.showAddTodoView = false
        },
        label: {
            Text("Done")
        })
    }
}

阐明:

  1. 经过将showAddTodoView声明为@Binding,咱们就声明晰它的iOS值将来自其他地方,并将被共享到AddTodoView和其他地方。
  2. ContentView和AddTodoView共享showAswift是什么组织缩写ddTodoView值。当修改“AddTodoView”中的“showAddTodoView”时输入框怎么调大小,则变化也会反射回ContentView,然后它会闭幕sheet。

4.4 增加用户输入框

接下来,咱们将为Todo输入框不显示称号增加一个TextField,为用户增ios模拟器加一个Picker用输入框怎么调大小来挑选一个待办事项类别(“作业”、“家庭”、“个人”),还有一个“完结”按钮。

@State private var name: String = ""
@State private var selectedCategory = 0
var categoryTypes = ["family","personal","work"]

阐明:

  1. 数组categoryTypes将存储咱们将要界说的类别,这些类别会显现在picke变量名的命名规则rview中。
  2. 状况变量selectedCategory将存储所选类别的数组索引。

增加一个VStack,其中包括输入控件TextFiled

VStack{
    Text("Add Todo").font(.largeTitle)
    TextField("To Do name",text: $name)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .border(Color.black).padding()
    Text("Select Category")
    Picker("",selection: $selectedCategory){
        ForEach(0 ..< categoryTypes.count){
            Text(self.categoryTypes[$0])
        }
    }.pickerStyle(SegmentedPickerStyle())
}.padding()

阐明:

  1. Picker视索引图答应用户从一组已界说的项中挑选某一项。
  2. ForEach循环遍历categorios下载yTypes数组和挑选器。
  3. 留意,咱们在挑选器视图的结尾增加了一个修饰符. pickerstyle (SegmentedPickerStyle())。
  4. 这实际上将咱们的Picker视图显现为S输入框egmentedControl。
  5. 留意如果咱们不写这个修饰符会产生什么

4.5ios16 将Todo项增输入框变小了怎么恢复加到Todos数组

咱们有承受用户输入的字段,让咱们输入框样式完结增加待办事项到待办事项数组。要做到这一点,AddTodoView需要微信输入框可以拜访待办事项ContentView。

Button(action: {
    self.showAddTodoView = false
    todos.append(Todo(name: name, category: categoryTypes[selectedCategory]))
},
label: {
    Text("Done")
})
  • 在AddTodo视图中,咱们经过@Binding接纳todo:
  • 记住@变量Bin变量的定义ding答应咱们拜访swift语言ContentView中的待办事项
  • 在Button的操作中,咱们创立一个Todo,然后将其增加到待办事项:

留意:

  • 留意,当运用append()时,输入框变小了怎么恢复新项会被增加到结尾,这意味着新的待办事项显现在最后一行。
  • 这儿还能看到数据源绑定的操作,Swi索引页是哪一页ftUI的理念是“真实的简单数据来历”。也swift国际结算系统便是说,视图背后的数据只要一个源。
  • 在咱们的例子中,todos只要一个来历ContentView。AddTodoView中的待办事项指ContentViewswift是什么中的待办事项
  • 经过@Binding关键字。运用ios下载@Binding答应咱们进ios下载行绑定之间的数据视图。这可以避免同一文件的多个或多个副本导致数据不一致的数据。

总结iOS

运转结果:

SwiftUI教程(五)运用List创立列表运用程序

发表评论

提供最优质的资源集合

立即查看 了解详情