何かをしたいときに、どういうモディファイアを使えばできるかを逆引きできるものがあるといいなと思い、
自分の知識の整理も含めて、
今回のようなページを作成してみました。
随時更新していきます。
SwiftUIの基本形
View().modifier()という形で記載する。
Struct Test: View{
var body:some view{
Text("表示").foregroundColor(Color.green) //・・・ View().Modifire()の形式
}
}
なので、view内にはview()を一番上に作成してその下にmodifierを適用していくというイメージ。
さまざまなView
| View | 説明 |
|---|---|
| Rectange() | 四角形を作成 |
| Image() | 画像を表示 |
| Circle() | 円を作成 |
| Button(action:{}) | ボタンを作成。そしてタップした際の挙動を指定する。例)Button("New Fruit"){newFruit()}という書き方もできる。SwiftでいればUIButton |
| Text() | 文字を表示。SwiftでいればUILabel |
| TextField("入力してください。", text: $value) | 入力欄を表示。入力した値はプロパティvalueに入る。第1引数はプレースホルダ |
| SecureField("パスワードを入力してください", text: $password) | パスワードの入力欄を表示。入力すると●●で表示される。 |
| EditButton() | 編集ボタンを表示させ、ユーザーがタップをすると入力欄(TextField)や、Listのセルを編集モードにする。 |
| ScrollView(){} | スクロールできる箇所を指定する |
| Spacer() | 空白を入れる |
| Divider() | 線を入れる |
| VStack(){} | Vertical(垂直)方向にViewを整列する |
| HStack(){} | Horizontal(水平)方向にViewを整列する |
| ZStack(){} | z軸方向にViewを整列する |
| List(){} | Listを表示する。Swiftで言えばUITableView |
| NavigationView(){} | ナビゲーションビューのルートビューとして設定。Swiftで言えばNavigationController |
| Picker(){} | タブを表示する。Swiftで言えばUISegmentedControl |
| Slider() | スライダーを表示する。Swiftで言えばUISlider |
※ よくLineとかはセルを横スライドすると「赤い削除ボタン」などが表示されるが、編集モードになるとそういった処理をかますことができる。
さまざまなModifier
| Modifier | 説明 | 例 |
|---|---|---|
| .clipShape() | 指定した画像でマスクする。.clipShape(Circle())ならCircle()ビューでマスクする | .clipShape(Circle()) |
| .resizable() | リサイズして表示する | |
| .foregroundColor() | テキストの色を指定する | .foregroundColor(Color.white) |
| .background() | 背景の色を指定する | .background(Color.black) |
| .rotationEffect() | Viewを回転させる | .rotationEffect(Angle(degrees: -33), anchor: UnitPoint(x: -0.7, y: 1.0)) |
| .frame() | これって実はテキストの大きさではなく枠(div的な)の大きさで、そのテキスト自体とかではない。 なのでframeの第3引数でalingemntがあるが、中央や右、右上、とか9種類あるから空間ができるという感じ。 |
.frame(.alignment: center) |
| .fill() | 背景の色を指定する | .fill(Color.black) |
| .font() | 文字の大きさを指定する。swiftUIで定義されたものやpx単位で指定可能 | .font(.largeTitle)や.font(.system(size: 12)) |
| .shadow() | Viewに影をつける | .shadow(color: .gray, radius: 3, x: 10, y: 10) |
| .border() | 枠に色を付ける | .border(Color.black) |
| .overlay(Text("aaa"), alignment: .bottom) | Viewに別のViewを重ねる | .overlay(Text("aaa"), alignment: .bottom) |
| .opacity() | 透明度を指定する | .opacity(0.5) |
| .blur() | ぼかしをつける | .blur(radius: 5.0, opaque: false) |
| .compositingGroup() | Viewの要素をグループ化 | |
| .brightness() | ||
| .contract() | ||
| .colorInvert() | ||
| .saturation() | ||
| .grayscale() | グレースケール | |
| .hueRotation() | ||
| .luminanceToAlpha() | ||
| .colorMultiply() | 色の乗算 | .colorMultiply(Color.purple) //https://developer.apple.com/documentation/swiftui/list/colormultiply(_:) |
| .accentColor() | .accentColor(Color.white) | |
| .stroke() | .stroke(linewidth:) | |
| .offset(x: ) | 位置をずらす | .offset(x: ) |
| .position() | ポジション | .position() |
| .renderingMode() | .renderingMode(.original) | |
| .sheet(isPresented: self.$show) { // 下から表示 VStack(spacing: 30){ Input() } } |
View遷移する | .sheet(isPresented: self.$show) { // 下から表示 VStack(spacing: 30){ Input() } } |
| .scaledToFill() | 枠内いっぱいに表示されるように拡大縮小されるので、はみ出した分の左右もしくは上下は切り取られる。(frameは枠だからそれを超えたらアウト？) | .position() |
| .scaledToFit() | 枠内からハミ出さないように拡大縮小されるので、左右もしくは上下に空白ができる可能性がある。 | .position() |
| .aspectRatio(0.5, contentMode: .fit) | ポジション | .aspectRatio(0.5, contentMode: .fit) |
| .mask() | Viewでマスクする。ViewなのでImageでもTextでもマスクできる | .mask( Image("text_image") ) |
| .onAppear() | View構築の最初の時に実行される | .onAppear { // onAppearはviewが初めて呼ばれる時に実行される。(つまり再構築したりしても呼ばれず、最初の1回のみ) ってことはどこか別のview画面開いてまた戻っても既に呼ばれてるから実行されないよな withAnimation(.linear(duration: 0.7)) { // linearは線形つまり一定の割合で。 // NOTE: opacityを変更する画面再描画に対してアニメーションを適用する self.opacity = 1.0 } } |
| .animation() |
さまざまなイベント
イベントとはアプリであればシングルタップやダブルタップ、
ロングでアイコンを触りながらドラッグするとか、そういった行動のことをイベントと言います。
Webであれば、カーソルでボタンをクリック(click)することや、ボタンにカーソルを当てる(on blurやon focus)など
さまざまなイベントが用意されています。
さまざまなイベントについては以下で解説してますので、ぜひ！ 続きを見る
【SwiftUI】ジェスチャーによるイベント