swift(ui)

docsみましょう

Button

struct ContenttView: View {
	@State var text = "none"

	HStack {

		Text(text)

		Button("ボタン1") {
			text = "ボタン１"
		}

		Button(
			"ボタン2",
			action: {
				text = "ボタン2"
			}
		)

		Button(
			action: {
				text = "ボタン3"
			},
			label: {
				Text("ボタン3")
			}
		}
	}
}

Spacer()

スペースを入れる

.frame()

親要素のフレームワーク？サイズを変更する

考察）.frameは上の方に書かないといけないらしい。上から実行されるから先にフレームの大きさを処理する？

.padding()

幅を空ける

Text(”りんご”)
// 下に幅を空ける
	.padding(.bottom)

.background()

背景に色をつける

Text("こんにちは！")
	.backgrounnd(Color.red)

.foregroundColor()

text(要素)に色をつける

Text("こんにちは！")
	.foregroundColor(Color.white)

VStack

部品を垂直（上下）方向に並べたい

struct ContenttView: View {
	@State var text = "こんにちは"

	VStack {
		Text(text)
			.padding()
		Button("ボタン") {
			text = "こんばんは"
		}
	}
}

HStack

部品を水平方向に並べたい

HStack {
	Text("Hello")
		.backgrounnd(Color.yellow)
	Text("World")
		.backgrounnd(Color.cyan)
}

ZStack

部品を重ねる仕組み

重ねたいものを重ねたい順番で書く

ZStack {
	Color.yellow
	Text("Hello")
}

使用例）丸の中に数字とか？

.ignoresSafeArea()

セーフエリア以外（上下のノッチ部分）も対象になる

struct IgnoreView: View {
    var body: some View {
        Color.cyan
            .IgnoresSafeArea()
    }
}

カスタムビュー

import SwiftUI

struct CustomView: View {
    // let 変数名: 型 = 値
    let color: Color
    let text: String
    var body: some View {
        Text(text).background(color)
    }
}

struct CustomView_Previews: PreviewProvider {
    static var previews: some View {
        CustomView(color: .red, text: "Hello, World!")
    }
}