2020.07.25 2020.08.12

3. SwiftUI VStackやHStackでのview配置の変更について調べてみた

tamappe

今回はVStackに配置されているViewの位置の変更について観ていきます。

Flutterではそもそもプロパティとして用意されていた記憶があります。

Tamappe Life Log

6. Column と Row ウィジェットで複数のウィジェットを配置する

🕒️January 20, 2020

今日はColumn とRow について学習しました。Flutter のColumn とRow の概念はiOSのUIKitにはないようなUIです。一つのレイアウトに複数のウィジェットを配置したい場合に使います。Androidに近い概念があります。そのためAndroidのレイアウトと比較してみます。FlutterAndroidColumnLinearLayout（Vertical）RowLinearLayout（Horizontal）AndroidのLinearLayoutは縦か横にUI を並べますがまさにそんな感じのウィジェットというイメージです。LinearLayoutで思い出したのですが、そういえばiOSにも似た概念にStackViewがあったことを忘...

こちらです。

Table of Contents

VStack

VStack はViewを縦に並べるレイアウトコンポーネントです。
基本は中央寄せになっています。

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("あいうえお")
                .background(Color.yellow)
            Text("かきくけこ")
                .background(Color.red)
            Text("さしすせそ")
                .background(Color.green)
            Text("たちつてと")
                .background(Color.blue)
        }
    }
}

f:id:qed805:20200725135118p:plain:w300

VStackでの上下の配置を制御する場合はSpacer()を使えばいいそうです。

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("あいうえお")
                .background(Color.yellow)
            Text("かきくけこ")
                .background(Color.red)
            Text("さしすせそ")
                .background(Color.green)
            Text("たちつてと")
                .background(Color.blue)
            Spacer()
        }
    }
}

下にSpacer()	上にSpacer()

子Viewの幅がそれぞれ異なっている場合に子Viewの左右揃えについてはalignmentで制御します。

VStack(alignment: .leading) { } // 左寄せ
VStack(alignment: .trailing) { } // 右寄せ

alignment = leading)	alignment = trailing)

このalignmentの定義にジャンプするとHorizontalAlignmentだったのですね。

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension HorizontalAlignment {

    /// A guide marking the leading edge of the view.
    public static let leading: HorizontalAlignment

    /// A guide marking the horizontal center of the view.
    public static let center: HorizontalAlignment

    /// A guide marking the trailing edge of the view.
    public static let trailing: HorizontalAlignment
}

つまりVStackのAlignment は水平方向に対する揃えを制御していました。

HStack

HStack はViewを横に並べるレイアウトコンポーネントです。
同じく基本は中央寄せになっています。

struct ContentView: View {
    
    var body: some View {
        HStack {
            Text("あいうえお")
                .background(Color.yellow)
            Text("かきくけこ")
                .background(Color.red)
            Text("さしすせそ")
                .background(Color.green)
            Text("たちつてと")
                .background(Color.blue)
            
        }
        .background(Color.gray)
    }
}

HStack (背景色はグレー)

HStackのalignmentはVerticalAlignmentと言われる構造体でした。

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension VerticalAlignment {

    /// A guide marking the top edge of the view.
    public static let top: VerticalAlignment

    /// A guide marking the vertical center of the view.
    public static let center: VerticalAlignment

    /// A guide marking the bottom edge of the view.
    public static let bottom: VerticalAlignment

    /// A guide marking the topmost text baseline view.
    public static let firstTextBaseline: VerticalAlignment

    /// A guide marking the bottom-most text baseline in a view.
    public static let lastTextBaseline: VerticalAlignment
}

HStackにalignmentを使って宣言すると

struct ContentView: View {
    
    var body: some View {
        HStack (alignment: .top) {
            Text("あいうえお")
                .background(Color.yellow)
                .frame(height: 200)
            Text("かきくけこ")
                .background(Color.red)
            Text("さしすせそ")
                .background(Color.green)
            Text("たちつてと")
                .background(Color.blue)
            
        }
        .frame(maxWidth: .infinity, maxHeight: 200)
        .background(Color.gray)
    }
}

これで次のように見えます。

f:id:qed805:20200725141821p:plain:w300