第三章初见VStack|Image|Spacer|.Frame

项目已经创建好了，接下来我们就开始一步步的重写我们的项目吧。我们准备先做我们的入口界面，也就是我们的登录界面。

虽然界面也不是很好看，但是我们觉得能用 SwiftUI 作出这样的界面，也是我们学习 SwiftUI 的重大飞跃。

首先我们将程序自动给我们创建的 ContentView.swift 重命名为我们需要的 LoginPage.swift。

swift 复制代码

struct LoginPage: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

使用 VStack 纵向布局

对于登陆界面我们发现是从上倒下进行布局的，那么我们首先需要用到的 VStack 进行布局。那么我们可以将光标选中 Text , 然后 Command + 单击就可以选择 VStack 进行重构布局。

swift 复制代码

VStack {
    Text("Hello, world!")
        .padding()
}

我们发现核心的代码变成了这个样子，但是显示的 UI 一点都没有改变，因为 VStack 默认只有 Text 大小之后居中进行布局的。

我们登陆界面看见的第一个元素就是稳健医疗的 Logo ,那么我们将所需要的资源拖拽到我们的资源里面。

我们的图片竟然有白色的背景，原谅我们的设计经验少。但是大家开发一定要让自己设计给透明背景的图标，就是后面改动背景色时候不需要更新图标。

我们将 Text 换成 Image 用来显示我们的 Logo。

swift 复制代码

VStack {
    Image("winner_logo")
}

但是我们的 Logo 在最上方的呀，在 SwiftUI 中有和 Flutter 一样的组件 Spacer。

Spacer 是占据空间，在下面代码里面是占据下面剩余的所有空间。

swift 复制代码

VStack {
    Image("winner_logo")
    Spacer()
}

我们的 Logo 被置顶了，但是和我们要做的不太一样。我们需要 Logo 和顶部有一定的距离，我们可以设置有高度的 Spacer

swift 复制代码

VStack {
    Spacer()
        .frame(height:100)
    Image("winner_logo")
    Spacer()
}

Logo 的下面是我们选择服务器地址的地方，对于 iOS 没有什么可以类型 PopMenuButton 的东西，只有一些 ContextMenu 类型的，但是两个体验差别很大。

对于要配置多到的服务器地址，我们可以采用 Enum 来轻松的做到这一点。为了让我们的项目看起来更加的规范。

我们来调整一下目前的项目结构，首先将 LoginPage.swift 转移到 Controller/Login 文件夹中。

我们在 Controller 的同一级目录创建一个 Define 的文件夹，用于存放我们的常量和 Enum。我们新建 AppServer.swift 。

swift 复制代码

enum AppServer: String {
    case debug = "debug url"
    case release = "release url"
}

对于切换环境，输入用户名，输入密码的都有一样的结构。

swift 复制代码

VStack {
	HStack {
		left,
		center,
		right
	}
	line
}

简单的结构如下，那么我们将中间的部分进行抽离做成组件。