实战编程

接下来，我们正式进入到编程阶段，打开Xcode开发工具，点击Create a new Xcode project，将新项目命名为IdeaNote，如下弹窗所示：

首页-缺省图

点击视图工具栏的Assets.xcassets文件，拖入首页缺省图的图片，如下图所示：

回到ContentView文件，在用户初始进入时，映入眼帘的是一个初始的样式，它由图片和文字组成，如下代码所示：

// 缺省图
func noDataView() -> some View {
    VStack(alignment: .center,spacing: 20) {
        Image("mainImage")
            .resizable()
            .scaledToFit()
            .frame(width: 240)
        Text("记录下这个世界的点滴")
            .font(.system(size: 17))
            .bold()
            .foregroundColor(.gray)
    }
}

上述代码中，我们创建了一个新的缺省视图noDataView。

图片与文字使用VStackc垂直布局容器，容器内的元素alignment对齐方式为center居中对齐，元素的spacing间距为20。

图片引用之前导入的mainImage图片，为了保持图片在视图内的展示效果，使用resizable修饰符调整图片大小，使用scaledToFit修饰符保持其宽高比，防止图片变形，最后使用frame修饰符设置图片的大小为240。

文字部分内容设置为“记录下这个世界的点滴”，使用font修饰符设置文字大小为17，使用bold修饰符使得文字加粗，使用foregroundColor修饰符设置文字填充颜色。

运行预览效果如下图所示：

新建笔记按钮样式也可以按照上述创建视图的方式，如下代码所示：

// 新建笔记按钮
func newBtnView() -> some View {
    VStack {
        Spacer()
        HStack {
            Spacer()
            Button(action: {
            }) {
                Image(systemName: "plus.circle.fill")
                    .font(.system(size: 48))
                    .foregroundColor(.blue)
            }
        }
    }
    .padding(.bottom, 32)
    .padding(.trailing, 32)
}

上述代码中，我们创建了一个新的新建笔记按钮视图newBtnView。

新建笔记按钮的核心是一个图标按钮，使用Image组件引用系统提供的图标“plus.circle.fill”，按钮的交互可以直接使用Button组件。

为了使按钮文字放置在屏幕右下角，我们使用VStack垂直容器和Spacer占位视图将按钮撑在底部，然后再使用HStack横向容器和Spacer占位视图再把按钮撑到右边，我们再使用padding在bottom底部和trailing右边都留出距离。

如此我们就完成新建笔记按钮的样式，最后我们在主视图中与noDataView缺省图使用ZStack层叠容器包裹，运行预览效果如下图所示：

还差点什么？标题。标题部分可以直接使用NavigationView导航视图与navigationTitle修饰符设置标题，如下代码所示：

NavigationView {
    ZStack {
        noDataView()
        newBtnView()
    }.navigationBarTitle("念头笔记", displayMode: .inline)
}

首页-列表页

当用户新建了笔记之后，首页便从原本的缺省视图转换为列表视图，列表视图中的主要两块视图为“搜索栏”、“列表栏”，如下图所示：