# SwiftUIメモ. コンポーネント. レイアウト系

# VStack, HStack, ZStack

# Control

  • VStack { .. } : タテ

  • HStack { .. } : ヨコ

  • ZStack { .. } : 奥行き方向

  • VStack(alignment: .leadning, spacing: 15.0)

    • align と 要素間の間隔を指定

# Text

# Control

  • Text("aaa")

# Modifier

これは Text のみのやつと、他と共通のが混じってる気がする

  • .font(.title)

    • フォントサイズ
    • .font(.system(size: n))
  • .fontWeight(.thin)

    • .heavy, .black, .medium
  • .foregroundColor(Color.red)

  • .backgroundColor(Color.white)

  • .frame(width: w, height: h, alignment: x)

    • 幅と高さを固定する
    • alignment: .bottomTrailing : 右下
    • maxWidth: .infinity) : 幅いっぱいに表示 (Spacer()でなんとかしてた)
  • .lineLimit(n)

    • 最大行数を指定する
  • .multilineTextAlignment(.trailing)

    • 右寄せ
  • .border(Color.green, width: n)

  • .italic()

  • .padding() : 余白をつける

    • .padding(.all) : デフォルト
      • .top, .bottom, ..
    • .padding(.all, size)
    • .padding(EdgeInsets(top: 0, leading: 16, bottom: 80, trailing: 16))
  • .offset(x: m, y: n)

何も指定しないときは inherited と表示される

# Spacer, Divider

  • Spacer() : 余白を埋める
  • Divider() : 区切り線を入れる ( Separator ではないよ ← 検索用)

# Image

# Control

  • Image(<画像名>)
    • 画像名は Assets.xcassets で登録したもの

# Modifier

  • .resizable()
    • 画面サイズに合わせてリサイズ
  • .aspectRatio(contentMode: .fit)
    • .fit : 短辺を 100% にする
    • .fill : 長辺を 100% にする
    • 同様のメソッド
      • .scaledToFit()
      • .scaledToFill()
  • edgesIgnoringSafeArea(.all)
    • M 字ハゲのところも埋める
  • .scaleEffect(n)
    • n 倍に拡大する
  • .frame(width: w)
  • .offset(x: x, y: y)
  • .clipped()
    • はみ出た部分を切り取る
  • .overlay( ... )
    • 中に Text("..") を入れて文字を重ねる
  • .renderingMode(.original)
    • ボタン内で画像を使うと青くなってしまう問題の対策

# 図形

# Control

  • Circle()
  • Ellipse()
  • Rectangle()
  • RoundedRectangle(cornerRadius: r) : 角丸四角
  • Capsule() : 陸上トラック型

# Modifier

  • .stroke(lineWidth: w) : 線幅
  • .rotationEffect(.degrees(45), anchor: .botttom) : 回転
    • anchor: は回転の中心
  • .foregroundColor(.pink)
  • .frame(width: w)
  • .position(x: x, y: y)
    • offset() ではないのか
  • .edgeIgnoringSafeArea(.top)
    • セーフエリア(M字ハゲの部分)にもはみ出すかどうか
  • .clipShape(Circle())
    • 円の形にクリッピング
  • .shadow(radius: r)
    • 影をつける。ちなみに Text() にもできる
  • .rotation3DEffect(.degrees(455), axis: (x: x, y, y, z:z))
    • 使うケースが思い浮かばないけど

# List

# Control

  • List { .. }

これは、UITableView 的なもの?
だとして、こんなかんたんで良いのだろうか。という気持ち

配列渡す場合

List(0 ..< items.count) { i in
    Text(items[i].name)
}
List(items) { item in
    Text(item.name)
}

# Modifier

  • .listStyle(GroupedListStyle())
    • 設定すると、設定画面のようにグループ間が広くなる
    • 指定しなければアドレス帳の索引のように細い。

# Control

  • NavigationView { .. }

# Modifier

NavigationView 自身でなく、配下のコントロールで呼び出す

  • .navigationTitle("タイトル")
  • .navigationBarTitleDisplayMode(.inline)

# 使い方

NavigationView {
    List {

    }
    .navigationTitle("..")
    .navigationBarItem(trailing: NavigationLink(destination: XxxView()) {
        Text("編集")
    })
}
  • navigationBarItem() のところで右上に出すボタンを設定している

# Section

# Control

  • Section(header: Text("x"), footer: Text("x")) { ForEach.. }

# 使い方

List の中に入れて使う?

List {
    Section(header: Text("あー")) {
        ForEach(0 ..< 5) { item in
            Text("あああー")
        }
    }
    Section(..) {
        ...
    }
}

# Control

  • Link(name, destination: URL(string: url)!)

# URLチェックする場合

if let url = URL(string: url), UIApplication.shared.canOpenURL(url) {
    Link(name, destination: url) // リンクにする
} else {
    Text(name) // リンクにしない
}

# Color

# Control

  • Color.white

これで背景の設定になるそうで、.onTapGesture をつなげたりできる

[ 📩 ご意見 ]