SwiftUIミニマリストチュートリアル03：VStack、HStack、ZStackビュー配置の使用（パート1）

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して3日目です。クリックしてイベントの詳細をご覧ください。

序文：書くことは一種の気性であり、インターネット上に各単語が現れるのを見ると、言葉では言い表せないほどの満足感があります。以前はステーションBでプロダクトマネージャーに関する一連のビデオを作成しましたが、今回はナゲッツでの開発に関する一連の記事を作成したいと思います。

今日の仕事の声明：どのような環境でも、他の人の利点を発見する必要がありますが、他の人の利点を学びながら、これがあなたの利点であるため、自分の個人的な特徴を忘れないでください。

インターフェイス開発の過程で、ページが多くのUIコントロールで構成されていることがよくあります。たとえば、テキストと画像が上下左右に配置されている、テキストが画像の中央にあるなどです。これらのいわゆる順列は、まとめてスタックと呼ばれることがあります。

この章では、VStack垂直ビュー、HStack水平ビュー、およびZStackオーバーレイビューに分割されたスタックビューの使用方法を学習します。

VStack：ビューは垂直に配置されます。

HStack：ビューは水平に配置されます。

ZStack：オーバーレイ配置を表示します。

次の凡例は、これら3つのビューをすばやく理解して覚えておくのに役立ちます。

以下のUI例のプログラミングを完了してみましょう。

まず、SwiftUIStacksという新しいプロジェクトを作成しましょう。

まず、UI図をタイトルと支払いプランの2つの部分に分解してみましょう。

次のプロトタイプに示すように、最初はヘッダーセクションです。

タイトル部分は、テキスト（「メンバーシップパッケージ」）とテキスト（「プレミアム機能のロック解除」）の2つのテキストで構成されています。

2つのテキストは上下に配置されます。VStack{}を使用して2つのテキストを「ラップ」します。

フォントの太さ、テキストサイズなど、いくつかのスタイルを追加することで、タイトルを美しくすることができます。

VStack {
    Text("会员套餐")
        .fontWeight(.bold)
        .font(.system(.title))
    Text("解锁高级功能")
        .fontWeight(.bold)
        .font(.system(.title))
    }
复制代码

スタックのデフォルトビューは中央揃えです。UIドラフトのように左に揃えると、VStack垂直ビューに配置パラメータを追加できます。

さらに、2つのテキストの間に少し広げられるようにしたいので、spacingパラメーターを使用して間隔を設定できます。

パラメータ	名前	説明
アラインメント	中央揃え	.leading左揃え、.trailing右揃え、.center中央
間隔	間隔	間隔、コンポーネント間の間隔距離

VStack(alignment: .leading,spacing: 10) {
    Text("会员套餐")
        .fontWeight(.bold)
        .font(.system(.title))
    Text("解锁高级功能")
        .fontWeight(.bold)
        .font(.system(.title))
    }
复制代码

はい、タイトル部分は終了です。

我们发现标题和下面的定价方案是上下排列，那么我们可以先用一个VStack包裹起来。

特别说明：组件之间缺少Stack包裹，那么系统是不知道它是什么排列方式的，会报错。

鼠标移动到VStack的位置，键盘按住command键，单击鼠标，我们可以看到Xcode提供了快捷动作的编程方式。

我们选择Embed in VStack，那么我们在之前VStack外面会再包裹一层VStack。

这样做的好处是，我们常常编程时，代码多的情况下会不知道“{}”是包裹什么代码的，或者漏了末尾的“}”。

在这里我们可以先备注下Stack包裹的代码块，便于我们找到代码块的起始位置和终止位置。

VStack {
    //标题
    VStack(alignment: .leading,spacing: 10) {
        Text("会员套餐")
            .fontWeight(.bold)
            .font(.system(.title))
        Text("解锁高级功能")
            .fontWeight(.bold)
            .font(.system(.title))
        }
            //定价方案
    }
复制代码

下面我们来做付费方案的部分。

先分析下UI稿，我们可以看到有3个定价方案，我们看到的尺寸大小基本是一致的，使用HStack横向排布的方式。

我们先做单个定价方案的样例，再复制其他2个，修改下颜色就行了。

在这里我们先忽略“首月特惠”的样式，因为这块用到了ZStack，那么这块先放在最后。

分析下单个定价方案，我们发现由Text(“连续包月”)、Text(“¥18”)组成，我们依旧可以用VStack纵向排列。

在这个VStack外，我们可以看到它有撑开的部分.padding，背景颜色.background，还有圆角.cornerRadius修饰。

// 定价方案
    VStack {
        Text("连续包月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(.gray)
        Text("¥18")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(.red)
        }
        .padding(20)
        .background(Color.orange)
        .cornerRadius(10)
复制代码

代码运行后发现，和UI稿还是有点差距的，这是因为使用的系统颜色与UI设计稿的颜色相差甚远。

我们需要使用和UI设计稿一样的颜色，设置颜色的方式有2种，一种是使用RGB颜色值，一种是在Assets.xcassets文件中导入颜色再引用。

使用RGB颜色值方法如下：

// 定价方案

VStack {
    Text("连续包月")
        .fontWeight(.bold)
        .font(.system(size: 17))
        .foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
    Text("¥18")
        .fontWeight(.bold)
        .font(.system(size: 30))
        .foregroundColor(Color(red: 239/255, green: 129/255, blue: 112/255))
    }
    .padding(20)
    .background(Color(red: 250/255, green: 247/255, blue: 243/255))
    .cornerRadius(10)
复制代码

导入颜色的方法如下：

点击Assets，在底部点击“+”按钮，选择Color  Set（或者鼠标右键）。

为方便记忆，我们可以使用颜色值作为命名，也可以用其他便于记忆的命名。

选中Any Appearance，这是默认的颜色，Dark为黑夜模式下的颜色，Apple要求上架的应用必须适配黑夜模式。

点击左侧顶部“设置”页，点击Color下的Show Color panel，这时会打开颜色选项弹窗。

我们可以设置RGB颜色，也可以使用Hex颜色设置，这里我们设置Hex Color 为faf7f3。

我们回到ContentView.swift文件，把VStack的背景颜色改成Color(“faf7f3”)，在Color()中输入我们之前导入的颜色名称。

这样我们就可以引用录入的颜色了。

两种方式在实际业务开发中都可以使用，主要看个人习惯，没有优劣之分。

让我们回到定价方案的编程。

我们可以看到连续包月的定价方案有一个圆角的边框，我们可能会想到之前在Text中学到的.border()参数。

那先看看效果。

// 定价方案

VStack {
    Text("连续包月")
        .fontWeight(.bold)
        .font(.system(size: 17))
        .foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
    Text("¥18")
        .fontWeight(.bold)
        .font(.system(size: 30))
        .foregroundColor(Color(red: 239/255, green: 129/255, blue: 112/255))
    }
    .padding(20)
    .background(Color("faf7f3"))
    .border(Color(red: 202/255, green: 169/255, blue: 106/255),width: 2)
    .cornerRadius(10)
复制代码

首先科普一个知识点。

在编程区中不难发现，我们把.border()代码放在了.cornerRadius(10)前面。

这是因为SwiftUI语言中，修饰符是顺序执行的，也就是我们是先有边框，才把边框编程10度的圆角。

如果先有圆角，再有边框，那么我们就会得到里面的撑开的颜色是圆角的，但边框是直角的，不妨试试效果。

另外一点，我们看到模拟器中，圆角边框缺失了4个角。

这是因为SwiftUI默认为maskToBounds，所以这种方式设置的圆角会被裁剪一部分。

这时我们不能用这种方式设置，我们可以使用之前学过的.overlay()修饰符“覆盖”一个圆角。

// 定价方案

VStack {
    Text("连续包月")
        .fontWeight(.bold)
        .font(.system(size: 17))
        .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
    Text("¥18")
        .fontWeight(.bold)
        .font(.system(size: 30))
        .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
    }
    .padding(20)
    .background(Color("faf7f3"))
    .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
复制代码

代码.overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2)看起来特别长，不用担心，我们理解下它。

RoundedRectangle()：圆角矩形；

cornerRadius：圆角度数；

stroke：描边；

Color：颜色；

lineWidth：线度；

用自然语言来阅读下代码：给这个视图加一个圆角，再给圆角描个有颜色的线框。

好了，我们完成了第一个定价方案的编程啦！

この知識は少し多すぎるので、2つの章で書くだけです。次のパートを楽しみにしてください！