Text("Hello world!")

フォントの設定

テキスト色の設定

改行時のスペース設定

行数の制限

SwiftUIのLabelは文字列とシステムアイコンや画像の名前を以下のように追加して表示します。

システムアイコンを追加する場所は以下のようにに追加します。

Label("文字列", systemImage: "システム画像")


スクリーンショットでは画像→文字列の順番で表示されていますが、表示する場所に応じて画像だけになったり、並び順が変わったりするそうです。

画像のリサイズ

アスペクト比の設定

四角形

円

ProgressView("読込中", value: 50, total: 100)

.background()内で四角形を追加してProgressViewに背景色を設定してみました。


RadialGradientでBackgroundにグラデーションを設定してみました。

カラーの配列、センターの位置、半径の設定をします。

VStackは縦並びのレイアウト方法です。

VStack内にTextを連続して並べてみます。

VStackに対してフォントサイズを指定することで、3つのテキストに対してまとめてフォントの指定ができました。

区切り線の追加

区切り線の追加はDivider()と書くだけで簡単に設定できました。

HStackは横並びのレイアウトです。

Numberと区切り線のテキストが入ったレイアウトをそのままHStackのレイアウトに変更すると以下のような横並びのレイアウトになりました。

ZStackは垂直方向のレイアウトになります。

コードで言うと一番最初に配置したものが一番奥に描画されてその上にUIパーツが積み重なっていくイメージだと思います。

スクリーンショットのレイアウトでは四角形の上にテキストが描画されています。

var body: some View {
        ScrollView(.vertical) {
                   LazyVStack(spacing: 10) {
                        ForEach(0..<100) { index in
                            Text("\(index)")
                                    .frame(width: 200, height: 200)
                                    .border(.gray.opacity(0.5), width: 5)
                                    .background(.yellow)
                                    .cornerRadius(6)
                        }
                    }
                    .padding(.leading, 10)
                    .font(.largeTitle)
                }
    }

var body: some View {
        ScrollView(.horizontal) {
                   LazyHStack(spacing: 10) {
                        ForEach(0..<100) { index in
                            Text("\(index)")
                                    .frame(width: 200, height: 200)
                                    .border(.gray.opacity(0.5), width: 5)
                                    .background(.yellow)
                                    .cornerRadius(6)
                        }
                    }
                    .padding(.leading, 10)
                    .font(.largeTitle)
                }
    }

var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(0...100, id: \.self) { index in
                    Text("\(index)")
                        .frame(width: width / 3, height: width / 3)
                        .background(colors[index % colors.count])
                    .cornerRadius(8)
                }
            }
        }
        
    }

    let colors: [Color] = [.gray, .yellow, .red, .blue]
    
    var rows: [GridItem] =
    Array(repeating: .init(.flexible(), alignment: .center), count: 3)
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows, spacing: 10) {
                ForEach(0...100, id: \.self) { index in
                    Text("\(index)")
                        .frame(width: 100, height: 100)
                        .background(colors[index % colors.count])
                    .cornerRadius(8)
                }
            }
        }
    }