Xcode(SwiftUI版)のコマンドリスト(2022/05/18更新)

徐々に画像添付していきます

VStack・HStack・ZStack

コード	説明	備考
VStack(alignment: .値, spacing: 数値){}	垂直に要素を並べる	（アトリビュートインスペクタで変更可能）
HStack(alignment: .値, spacing: 数値){}	水平に要素を並べる	（アトリビュートインスペクタで変更可能）
ZStack(){}	画像などを同じ位置の上に重ねる	（アトリビュートインスペクタで変更可能？）

サムネイルの作成エラー: ファイルがありません

サムネイルの作成エラー: ファイルがありません

サムネイルの作成エラー: ファイルがありません

フォント・縦横サイズ・余白の変更

フォント

コード	説明	備考
.font(.値)	文字の大きさ	発展１（アトリビュートインスペクタで変更可能）
.fontWeight(.値)	文字の太さ	（アトリビュートインスペクタで変更可能）
.foregroundColor(Color.色)	文字の色	（アトリビュートインスペクタで変更可能）
.frame(width: 数値,height: 数値, alignment: .値)	テキストフレームの縦横サイズの変更およびフレーム内での表示位置変更	（アトリビュートインスペクタで変更可能）
.lineLimit(数値)	テキストの行数制限をする	（アトリビュートインスペクタで変更可能）
.multilineTextAlignment(.値)	位置揃えを指定	（アトリビュートインスペクタで変更可能）
.border(Color.色, width:数値)	枠線の色と太さの指定	※１（アトリビュートインスペクタで変更可能）

◎発展１◎　.font(.system(size: 数値))にすると文字サイズを数値で指定することが可能。

※１　指定コードを入力するとアトリビュートインスペクタで変更が可能。デフォルトの状態では表示されない。

.の意味

.は「〜の」の意味

ドットシンタックスと呼ばれる

Text("Hello XCode!!").font(Font.title)のように繋げて１行に書くことが可能

文字列連結

例）Text("Hello") + Test("XCode")

『＋』で文字列連結を行う

⚠️単純に文字列が連結したわけではなく、個々に属性を指定した文字列を続けて表示している

余白

.padding() を使った余白調整（アトリビュートインスペクタで変更可能）

Spacer() を使った余白調整

.offset を使った余白調整

コード	説明
.padding()	全体の余白（値をマイナスにすると余白が狭まる）
.padding(.top, 値)	上の余白（　、、　）
.padding(.bottom, 値)	下の余白（　、、　）
.padding(.leading, 値)	左の余白（　、、　）
.padding(.trailing, 値)	右の余白（　、、　）
.padding(.vartical, 値)	上下の余白（　、、　）
.padding(.horizontal, 値)	左右の余白（　、、　）
.padding(.all, 値)	全体の余白（　、、　）
Spacer()	VStackまたはHStackを使用した際にオブジェクトを効率よく自動調整
.offset(x:値, y:値)	xまたはyの値分ずらす

テキストの背景色と余白の背景色

例１（テキストに背景色をつける）

Text("Hello XCode")

.background(Color.色)

.padding()

例２（余白に背景色をつける）

Text("Hello XCode")

.padding()

.background(Color.色)

イメージ画像と図形の表示

写真を表示する方法

①ナビゲータエリアで『Assets』を選択

②Finderから写真をドラック&ドロップ

サムネイルの作成エラー: ファイルがありません

③ナビゲータエリアで『ContentView』を選択

④『Resume』ボタンをクリックしてプレビューを表示

⑤『＋』をクリックし『メディアライブラリ』からイメージのアイコンをプレビューにドロップ

サムネイルの作成エラー: ファイルがありません

写真設定コード

コード	説明	備考
.resizable(resizingMode: .値)	添付画像リサイズ	（アトリビュートインスペクタで変更可能）
.aspectRatio(contentMode: .値)	画像伸縮変更	.fit　→frameで指定した領域内に収まるように伸縮 .fill　→領域を埋めるように縦横サイズの長い辺に合わせて伸縮 （アトリビュートインスペクタで変更可能）
.frame(width: 数値, height: 数値)	縦横サイズ指定	（アトリビュートインスペクタで変更可能）
.scaleEffect(数値)	イメージ拡大倍率変更	⚠️.offsetと実行する順番を変更すると実行結果が異なる
.offset(x: 数値, y: 数値)	表示ずらし	⚠️.scaleEffectと実行する順番を変更すると実行結果が異なる
.clipped()	画像切り取り	Imageコードの最後に実行する
.overlay(実行するプログラム)	画像と文字を重ねる	例 Image("swift") .overlay( Text("Hello XCode!") )

図形の作成方法

①『＋』をクリック

②Viewsに『Circle』と入力（円）

図形種類コード

コード	説明	備考
Circle()	円形	『＋』でCircleと調べるとある
Ellipse()	楕円形	『＋』でEllipseと調べるとある
Rectangle()	四角形	『＋』でRectangleと調べるとある
RoundedRectangle(cornerRadius: 数値)	角丸四角形	『＋』でRoundedRectangleと調べるとある
Capsule()	カプセル型	『＋』でCapsuleと調べるとある

Color Set（自分の好きな色）作成方法

①ナビゲータエリアでAssetsに移動する

②エディタエリアの左下の『＋』をクリックして『Color Set』をクリック

③カラーネームは自分で決めて『Any Appearance』を選択しRGBカラーを決める

サムネイルの作成エラー: ファイルがありません

④ナビゲータエリアでContentViewを選択しResumeをクリック

⑤＋をクリックして一番右のパレットマークをクリックすると自分の作った色が表示される

⑥それを.foregroundColor()の『（）』の中にドラック&ドロップ

サムネイルの作成エラー: ファイルがありません

図形設定コード

コード	説明	備考
.foregroundColor(.色)	図形色変更
.frame(width: 数値, height: 数値)	縦横サイズ変更	（アトリビュートインスペクタで変更可能）
.rotationEffect(.degrees(数値))	回転・傾き変更
.clipped()	領域からはみ出た部分の削除
.stroke()	線で描いた（塗りつぶさない）図形
.position(x: 数値, y: 数値)	表示位置指定