SwiftUIの基本を身につけたい方はこちら

【SwiftUI】モディファイアチートシート〜これを見ながら開発すると楽です。〜

この記事は、SwiftUIのモディファイアのチートシートです。よく使うモディファイアを一覧にしていきたいと思います。主に自分のために書いてます。。。使いながら更新していきます。

Button

モディファイア 説明 リンク
.padding() 余白をつける
.background(.red) 背景色を変更する
.cornerRadius(10) 丸みをつける

HStack

モディファイア 説明 リンク
.padding() 余白をつける

Image

モディファイア 説明 リンク
.scaledToFit() アスペクト比を維持しながら、親のViewに対して最大のサイズになる
.resizable() サイズを変える際に必ず必要になる
.frame(width: 10, height: 10, alignment: .center) 幅、高さ、整列を変更できる
.padding() 余白をつける

List

モディファイア 説明 リンク
.listStyle(DefaultListStyle()) リストのスタイルを変更する

NavigationView

モディファイア 説明 リンク
.navigationTitle("タイトル") ナビゲーションバーのタイトルを変更する
※NavigationViewの配下に記述する
.navigationBarItems(leading: ボタン, trailing: ボタン) ナビゲーションバーの左右にボタンを配置する
※iOS14で非推奨
.toolbar{} ナビゲーションバーの左右にボタンを配置する こちら
.navigationBarTitleDisplayMode(.large) ナビゲーションバーのスタイルを変更する

Text

モディファイア 説明 リンク
.frame(width: 10, height: 10, alignment: .center) 幅、高さ、整列を変更できる
.multilineTextAlignment(.center) テキスト位置を調整できる

TextField

モディファイア 説明 リンク
.padding() 余白をつける
.textFieldStyle(RoundedBorderTextFieldStyle()) 枠線を追加

TextView

モディファイア 説明 リンク
.onChange(of: freeText) { value in テキストを打つたびに呼ばれる
.frame(width: 10, height: 10, alignment: .center) 幅、高さ、整列を変更できる
.overlay(RoundedRectangle(cornerRadius: 5).stroke(Color.gray, lineWidth: 1)) 枠線をつけることができる
.padding() 余白をつける
.accentColor(.red) アクセントカラー変更

View

.preferredColorScheme(.light)

ScrollView

.safeAreaInset(edge: .top, spacing: 0) {}

Color

.gradient

Capsule()

.fill()

 

評価