いざ！ SwiftUI -8 配置 (1)

Adjusting the space between views | Apple Developer Documentation

画像より手軽なSF Symbol(電車)を使って表示場所を指定、配置する方法を見ていきます。

まずenumを使って前車両、中の車両、後ろの車両を定義します。

enum TrainSymbol: String {
    case front = "train.side.front.car"
    case middle = "train.side.middle.car"
    case rear = "train.side.rear.car"
}

enum "TrainSymbol"を使って表示する車両を指定して表示できるようにします。

struct TrainCar: View {
    let position: TrainSymbol
    let showFrame: Bool

    init(_ position: TrainSymbol, showFrame: Bool = true) {
        self.position = position
        self.showFrame = showFrame
    }

    var body: some View {
        Image(systemName: position.rawValue)
            .background(Color.blue)
    }
}

バックグラウンドの色のみ例示のものから変更しています。

Image(systemName: position.rawValue)
　　　　.background(Color.blue)

ContentViewを作ります。

struct ContentView:View{

    var body: some View {        
     TrainCar(.front)
    }
}

TrainCar(.front)

というふうに車両の".front"指定しています。そして、Appに入れ込み実行します。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {  
            ContentView()       
        }
    }
}

表示させてみると

指定した前の車両".front"が表示されました。

間隔の空け方(spacing)

HStackを使って横並びにしてみると。

        HStack {
            TrainCar(.rear)
            TrainCar(.middle)
            TrainCar(.front)
        }

HStack(spacing: )を使って間隔を変えることができます。

    HStack(spacing: 50) {        
            TrainCar(.rear)     
            TrainCar(.middle)      
            TrainCar(.front)    
        }  

変数を使って

struct ScaledSpacing: View {

    @ScaledMetric var trainCarSpace = 5
 
    var body: some View {
        Text("Scaled Spacing")
        HStack(spacing:trainCarSpace) {
            TrainCar(.rear)
            TrainCar(.middle)
            TrainCar(.front)
        }
        TrainTrack()
    }
}

HStack(spacing:trainCarSpace)

変数trainCarSpaceで数字を指定しています。

スペースを"0"にもすることができます。

HStack(spacing: 0)

と"0"を指定します。

上記で書いているもの全部表示すると

となります。コードは

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {           
             DefaultSpacing()
             SpecificSpacing()
             ScaledSpacing()
             ZeroSpacing()    
        }
    }
}

として実行できます。