Create a custom data model for Todo items in SwiftUI | Todo List #2

Summary

在这段视频脚本中，Nick介绍了在MVVM架构中创建和实现模型（Model）的过程。他们以待办事项列表应用为例，展示了如何构建一个自定义数据类型来表示待办事项。这个模型不仅包含事项的标题，还包含一个唯一标识符（ID）和一个布尔值（isCompleted），用以标记事项的完成状态。Nick还解释了如何让模型符合SwiftUI中的Identifiable协议，以便于在ForEach循环中使用，并演示了如何更新ListView和ListRowView来显示带有完成状态的待办事项。视频最后，Nick预告了下一集将介绍ViewModel，用于添加、删除和更新待办事项的逻辑。

Takeaways

• 📝 **模型定义**：在MVVM架构中，'Model'代表数据模型，用于定义应用程序的数据结构和状态。
• 📚 **自定义数据类型**：创建自定义数据类型（Model）来表示待办事项列表中的项目，包含标题、唯一标识符和完成状态。
• 🔍 **属性细节**：待办事项除了标题外，还应包含一个唯一ID和布尔值来标识是否完成。
• 🏗️ **简化生产应用**：虽然示例中的模型相对简单，但足以学习如何构建和有效实现模型。
• 📑 **Xcode项目**：在Xcode项目中创建一个新的模型组，并添加一个Swift文件来定义模型。
• 🔑 **唯一标识符**：为每个待办事项添加一个唯一ID，使用UUID生成随机字符串。
• 🔄 **符合协议**：使模型符合`Identifiable`协议，以便于在SwiftUI的`ForEach`循环中使用。
• 🎨 **动态UI**：根据待办事项的完成状态动态显示不同的UI元素，如红色圆圈表示未完成，绿色勾选表示已完成。
• 📝 **初始化器**：创建一个初始化器，要求提供标题和完成状态，但最终移除了ID的初始化，因为每个项已经有ID。
• 📱 **预览自定义**：在SwiftUI的预览中使用静态变量来展示不同的待办事项状态。
• 🌟 **字体与颜色**：调整字体大小和颜色，使已完成的事项显示绿色，未完成的显示红色。
• 🔧 **ListView更新**：更新ListView，使用ListRowView展示每个待办事项，并根据其完成状态显示不同的图标和颜色。

Q & A

在Swift UI中，如何改变ListView中项的字体大小？

可以通过在HStack中使用.font(.title2)来改变ListView中项的字体大小。

在接下来的视频中，将会介绍MVVM架构中的哪个部分？

在接下来的视频中，将会介绍MVVM架构中的ViewModel部分，这涉及到添加、删除和更新待办事项的逻辑。

Outlines

00:00

📝 构建模型

在本段中，介绍了MVVM架构中的'M'，即模型(Model)的概念。视频中的目标是创建一个自定义数据类型，用于表示待办事项列表应用中的待办事项。每个待办事项将包含一个标题、一个唯一标识符ID以及一个布尔值来表示事项是否已完成。虽然在生产级应用中模型可能更复杂，但本例旨在教授如何构建模型并有效实现到应用中。在Xcode项目中，通过创建一个新的模型组和文件，定义了一个名为'ItemModel'的结构体，它包含标题(title)、完成状态(isCompleted)和唯一标识符(id)。为了在SwiftUI的forEach循环中使用，'ItemModel'还遵循了'Identifiable'协议。

05:01

🔍 更新数组和视图

在第二段中，作者从使用字符串数组更新为使用'ItemModel'数组来存储待办事项。通过创建几个'ItemModel'实例，展示了如何初始化待办事项的标题和完成状态。同时，由于'ItemModel'遵循了'Identifiable'协议，因此不再需要显式地为每个待办事项创建一个ID。接下来，作者修改了列表行视图(ListRowView)，使其接受'ItemModel'类型的参数，并更新了文本和预览以反映待办事项的状态。此外，还介绍了如何在预览中使用静态变量来展示不同的待办事项状态，并使用三元运算符和条件颜色来根据待办事项的完成状态显示不同的图标和颜色。

10:02

🎨 完成列表视图样式

第三段主要关注于完成列表视图(List View)的样式设计。作者通过调整字体大小、颜色和添加一些内边距，使得列表行(List Rows)的外观更加吸引人且具有动态性，能够根据待办事项的完成状态变化显示不同的视觉元素。最后，作者回顾了整个视频的内容，包括创建'ItemModel'、将其实现到视图中，并预告了下一视频中将介绍的视图模型(View Model)，它将包含添加、删除和更新待办事项的逻辑。

Keywords

💡MVVM

MVVM是Model-View-ViewModel的缩写，是一种软件架构模式，用于构建和组织用户界面。在视频中，MVVM用于指导如何构建一个待办事项列表应用程序，其中Model代表数据模型，View代表用户界面，ViewModel作为数据和界面之间的桥梁，处理数据和界面的交互逻辑。

💡Model

在MVVM架构中，Model指的是应用程序中用于数据存储和操作的组件。视频中，Model用于创建自定义数据类型，用于表示待办事项列表中的每个条目，包含标题、唯一标识符和完成状态。

💡待办事项列表

待办事项列表是一种常用的应用程序，用于帮助用户跟踪和管理他们需要完成的任务。视频的主题是构建一个待办事项列表应用程序，其中展示了如何使用MVVM架构来设计和实现该应用程序。

💡自定义数据类型

自定义数据类型是指开发者根据特定需求创建的数据结构，它包含了一组特定的属性和可能的行为。在视频中，为了表示待办事项，创建了一个自定义数据类型，称为Item Model，它包含了标题、唯一标识符和完成状态。

💡唯一标识符（ID）

唯一标识符（ID）是一个用于区分不同数据记录的值，确保每个待办事项条目都可以被独立识别。视频中的Item Model包含一个ID属性，使用UUID生成，以确保每个待办事项都有唯一的标识。

💡布尔值（Boolean）

布尔值是一种逻辑数据类型，只有两个可能的值：真（true）和假（false）。在视频中，使用布尔值来表示待办事项是否已完成，其中`isCompleted`属性就是布尔类型，用来存储每个待办事项的完成状态。

💡Swift

Swift是一种由苹果公司开发的强类型、编译型编程语言，主要用于iOS、macOS、watchOS和tvOS应用程序的开发。视频中使用Swift语言来构建待办事项列表应用程序的Model。

💡Xcode

Xcode是苹果公司开发的集成开发环境（IDE），用于开发macOS、iOS、watchOS和tvOS的应用程序。视频中的开发者使用Xcode项目来创建和管理待办事项列表应用程序的代码。

💡SwiftUI

SwiftUI是一个由苹果公司提供的用于构建用户界面的框架，它允许开发者以声明式的方式创建应用程序的界面。视频中提到了SwiftUI，尤其是在创建和展示待办事项列表的界面时使用。

💡可识别（Identifiable）

在SwiftUI中，Identifiable是一个协议，它要求类型有一个唯一的标识符。这使得在列表中的数据项可以被独立识别和更新。视频中的Item Model遵循了Identifiable协议，以便于在SwiftUI的ForEach循环中使用。

💡初始化器（Initializer）

初始化器是编程中的一个概念，用于创建类的实例或结构体的实例，并在创建时设置其初始状态。在视频中，Item Model有一个初始化器，它接收标题和完成状态作为参数，用于创建新的待办事项条目。

💡列表行视图（List Row View）

列表行视图是用户界面中的一个组件，用于在列表中显示单个条目的信息。在视频中，开发者创建了一个自定义的列表行视图，用于展示待办事项的标题、完成状态和唯一标识符。

Highlights

MVVM架构中Model的创建，用于定义待办事项列表应用的数据模型

待办事项列表项将包含标题、唯一ID和完成状态

生产级应用中模型通常比示例更复杂，但本示例适合学习模型构建

在Xcode项目中创建一个新的模型组和文件，命名为ItemModel

ItemModel结构包含标题（title）和完成状态（isCompleted）

为了在SwiftUI的ForEach循环中使用，ItemModel需要符合Identifiable协议

ItemModel添加唯一标识符ID，使用UUID生成

初始化ItemModel时需要提供标题和完成状态

将数组中的字符串替换为ItemModel对象数组

由于ItemModel符合Identifiable，不再需要显式提供ID

更新ListView中的ListRow视图以使用ItemModel对象

使用Preview Provider创建静态的ItemModel对象以供预览使用

根据ItemModel的完成状态动态显示不同的图标和颜色

调整字体大小和添加边距以改善ListRow视图的显示效果

ListView现在可以根据ItemModel的完成状态显示不同的视觉反馈

接下来的视频中将添加ViewModel，实现添加、删除和更新待办事项的逻辑

应用正在逐步构建成型，提供了一个动态且响应式的待办事项列表界面

Transcripts

[Music]

all right

so the first m in mvvm stands for model

and that's what we're doing in this

video so what we're going to do is build

a model which is basically a custom

data type for our to-do list app we're

going to use a model

for the to-do list items because our

to-do list items are going to have more

than just

a title they're also going to have a

unique id

as well as an is completed boolean so

that we can determine

whether or not the to-do item is

completed or not

now of course when you build

production-ready apps

a lot of times the model is going to be

much more complicated than what we're

doing here

but this example is going to be perfect

for you to learn how to build models and

then how to implement them

into your app effectively so with that

said

let's take a look so i am back in our

xcode project

of course and in this video we're going

to look at

the model so the model is going to be

the custom data point that we have

for each of our to-do list items

and if we look right now if we go into

the list view which is where i'm at

right now we have the list and we're

looping on a bunch of items and the

items

is an array of string and this is great

because as we can see in the preview we

can change the title for each item

but there's more information here that

we want to include for each of these

items

and the main thing that comes to my mind

is whether or not this item is completed

because right now we have the check mark

on all three of these but sometimes when

we add items to our to-do list

they're not completed so we don't want

them to have a check mark here

and with the current setup right now

with this array of strings we can't

actually add

additional data into this we can't

determine whether or not this item this

string right here is completed or not

so by making a custom model we can

create a data type

that has both the title as well as a

boolean for whether or not it is

completed so let's right click the

navigator and create a new group

and we're going to call this models

so remember we're doing mvvm

architecture so now we have m

for model we have v for view and in the

next video we'll do

the view model but for right now right

click the models

create a new file and we're not going to

use a preview in this file so

instead of doing swift ui view like we

always do let's use just a regular swift

file go ahead and click next and i'm

going to call this

item model

go ahead and click create

this will be a struct and we're going to

call it item

model and we're going to open the

brackets

and you don't have to include the word

model effort but i like to

it is just a little helpful in

clarifying that this is the model

in our app there are two main things

that we have in our model

the first is the title so let's say let

title of type

string and the second is a

boolean whether or not it is completed

so we'll say let

is completed and this will be of type

bool so if it's complete well this will

be true if it's not it will be

false and this is pretty much it for our

model

but if you follow the swift ui bootcamp

you

are probably well aware that if we want

to use this item model in a for each

loop

it's much more convenient to make it

conform to identifiable

so to do that all we're going to do is

add a colon here and type

identifiable so now our item model will

conform to identifiable

and in order to do that we just need to

add an id

into our item model so we'll say let

id of type string

and for right now we're going to set it

equal to a random string so we're just

going to set it equal to

uuid open and close parenthesis

this is a built in function that will

create a random id

and then we'll just call dot uuid string

just to conform it to string because i

like making these ids

strings because strings are a little

more flexible if we want to put them

into like a third-party database or

something like that

so this is our whole model and in the

initializer right now if we go to create

an item model it's going to ask us

for a title and for is completed status

so now that we have this let's jump back

into the list view

and this items array instead of an array

of string let's do an array of

item model and i don't have it pulling

up here on my autocomplete

so i'm going to clean the build folder

and we can do that by going up to

product and clicking clean build folder

but we could also do

shift command k that will clean

rebuild and now if i type in item model

it should come up

we have an array of item models so of

course we don't need these anymore

so let's delete these and instead we

want item models so we'll do item

model open the parentheses and now we

have our

initializer that we just made so it's

looking for a title

let's do this is the first title and

is completed let's set it to false

comma let's do another one item model

title this is the second

is completed let's set this one to true

and then

comma item model open the parentheses

and let's just call it third and is

completed i'll do

false put a comma after it so now we

have an array of

three item models and we're getting this

error here because since we need the

since we're using this id here it's it

wants our item model to conform to

hashable

but because we conformed to identifiable

already

remember in our item model we conform to

identifiable with an id

and each of these items have an id

already we actually don't need

this initializer so we could just delete

this id

backslash self and we can just loop on

the items

now we also need to update the list row

view so i'm going to comment this out

for a second

and let's just put in a text of hi just

to make this go

the error go away for a second and let's

jump into that list row view

so list row view i'm going to click

resume here

and right now when we create a list row

view we are passing in a title

but of course we just built the model so

let's actually pass

in the item so we'll call it item and it

will be of type

item model and now our text instead of

referencing a title we will reference

item dot and we can see all the

variables within an item model so it's

that id the title and the is completed

status

so the title will be what our text is of

course

click resume and we actually need to fix

the preview down here as well

so what i'm going to do is create two

item models that we can use in this

preview so

in this preview provider here so because

we're working in the preview

these variables need to be static which

basically means that they

will not change and you don't really

need to worry about why we're using the

word static here this is one of the only

places we're going to use it

at least for this video so let's do

static

var item 1 and let's set it equal to

item

model and let's just make the title

first item you can make it whatever you

want and is completed we'll do

false let's create another variable here

we'll do static

var item 2 and we'll set this equal to

item

model and we'll do second

item is completed we'll do true

just so they have different is completed

statuses and in our preview here

let's delete this and we'll add a group

and in our group and we're doing a group

so that we can have two separate

previews we can preview

uh this list row view with the first

model and the list row view with the

second model so we'll do list row view

open parenthesis and we're going to pass

in item one

and again do list row view open the

parentheses and we're going to pass in

item two click try again on the preview

and we should now see our two item

models

and because we're in this group and we

have two separate previews they're

building on two different iphones so the

first one's up here

and the second one is down here but

these

listro views are very small so we don't

actually need to see it on the entire

iphone

so what we'll do is call dot preview

layout

dot size that fits and this will change

each preview to the smallest size

that fits our entire list row view so

now we can see the first item and the

second item

and let's customize these a little tiny

bit

the first thing that comes to mind is

that we only want the check mark if it

is completed

so right now the first one is not

completed and it shouldn't have a check

mark

so we're going to use a ternary operator

and we'll say

item dot is completed question mark so

if it is completed

let's use check mark dot circle

otherwise

let's just use circle

so already on the preview you can see

that that first one does no longer

has a check mark in it and the second

one it still has the check mark in it

that's because the first one is false

the second one is true let's also change

the colors

based on that so we'll do dot foreground

color

item dot is completed question mark if

it's completed

let's do color.green because that

signals

good otherwise we'll do dot red

so the first one is now red the second

one is green

let's make them a little bit bigger by

calling dot font and let's do maybe

title two and i put it down here at the

bottom of the h stack so that

both the text and the image are updated

with this font

and let's wrap this up with just a

little bit of padding on the

vertical axis and we'll add maybe eight

so that's it for a list review we now

have our list rows

looking really good and they are dynamic

they'll change whether or not

they are completed so we have the red

circle we have the green check mark

let's jump back into the list view

we can get rid of our high we're going

to get rid of the current list row view

there

and let's just type in list row view

open the parentheses

and it's looking for an item and of

course we're already looping on an array

of items because we have all of our

items here so here i'll just pass in

item and

beautifully we can see all of our items

in the list

we have red circles for the

non-completed green circles for the

completed

and this is starting to look like a real

app

uh now that's it for this video we

created our item model

we implemented the item model into our

view and in the next video we're going

to add the view model where we add a

whole bunch of logic

for actually adding deleting and

updating all of these items

it's gonna be a lot of fun i hope you

guys are excited for it

this app is really starting to come

together as always

i'm nick thank you for watching and i

will see you

in the next video

[Music]

you