[SwiftUI] テキストの装飾

VStackとHStack

HStack {
            Text("おはよう！")
                .padding()
            Text("Placeholder")
            Text("Placeholder 2")
        }

横並びか縦並びかの違い

式の値を返す変数
L 式の値が1つだけならreturnを省略できる

var num:Int {
    let result = 2 * 5
    return result
}

print(num)

return HStackのreturnが省略されている
read onlyでgetが省略されている

    var body: some View {
        HStack {
            Text("おはよう！")
                .padding()
            Text("Placeholder")
            Text("Placeholder 2")
        }
    }

getterとsetter

var radius = 10.0

var diameter: Double {
    get {
        radius * 2
    }
    set (length){
        radius = length / 2
    }
}

var around:Double {
    get {
        let length = 2 * radius * Double.pi
        return length
    }
    set(length) {
        radius = length / (2 * Double.pi)
    }
}

print("半径が\(radius)の時、直径の長さは\(diameter)")
diameter = 30
print("直径が\(diameter)の時、半径は\(radius)")
around = 100
print("円周の長さが\(around)の時、円の半径は\(radius)")

libraryからコードを配置

    var body: some View {
        VStack {
            HStack {
                Text("Hello, world")
                    .padding()
                Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
            }
            HStack {
                Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
                Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
            }
        }
    }

### フォントや縦横サイズの設定
font(), fontWeight(), foregroundColor(), frame(), padding()

フォントサイズ編集

        VStack {
            Text("Bicycle for the Mind")
                .font(.title)
                .fontWeight(.thin)
                .padding(.all, 40)
            Text("知性の自転車")
                .foregroundColor(Color.red)
        }

Line Limitとフレーム

        VStack {
            Text("春はあけぼの。やうやう白くなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。")
                .lineLimit(2)
                .frame(width: 200.0)
        }

alignment

        VStack {
            Text("The quick brown for jumps over the lazy dog.")
                .font(.largeTitle)
                .multilineTextAlignment(.trailing)
                .frame(width: 200.0)
        }

Border
L 色は、red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown, white, gray, black, clear, primary, secondaryが選べる

        VStack {
            Text("Bicycle for the Mind")
                .font(.title)
                .frame(width: 200.0, height: 200.0)
                .border(Color.green, width: 5)
        }

font size

        VStack {
            Text("Hello World")
                .padding()
                .font(.system(size: 100))
        }

frameの中での位置指定

        VStack {
            Text("The quick brown for \n jumps over \n the lazy dog.")
                .frame(width: 250, height: 200, alignment: .bottomTrailing)
                .padding()
        }

.titleや.heavyは Font.title, Font.heavyのFontを省略している

Inherited
L 上位の階層の設定があった場合に引き継ぐ

        VStack {
            Text("春はあけぼの")
            Text("夏は夜")
                .foregroundColor(.red)
            Text("秋は夕暮")
            Text("冬はつとめて")
        }
        .font(.title)
        .foregroundColor(.blue)

テキストを連結して表示

        VStack {
            Text("No.").bold() + Text("123").font(.largeTitle).foregroundColor(.red)
        }

とっつきにくい印象だったが、触ってみるとeasyね。