【SwiftUI】Environment の考え方

まず、作ってみます。

定型です。


private struct MyEnvironmentKey: EnvironmentKey {
  static let defaultValue: String = "Default"
}

extension EnvironmentValues {
  var myCustomValue: String {
    get { self[MyEnvironmentKey.self] }
    set { self[MyEnvironmentKey.self] = newValue }
  }
}

extension View {
  func myCustomValue(_ myCustomValue: String) -> some View {
    environment(\.myCustomValue, myCustomValue)
  }
}

デフォルトに "Default" という文字列を設定していますが、

SwiftUI の View であればどこでもプロパティラッパーを経由して利用できます。

入れ子になった View で使ってみます。


struct Root: View {
  var body: some View {
    First()
    Second()
  }
}

struct First: View {
  @Environment(\.myCustomValue) var myCustomValue

  var body: some View {
    Text("First " + myCustomValue)
  }
}

struct Second: View {
  @Environment(\.myCustomValue) var myCustomValue

  var body: some View {
    Text("Secound " + myCustomValue)
    Third()
  }
}

struct Third: View {
  @Environment(\.myCustomValue) var myCustomValue

  var body: some View {
    Text("Third " + myCustomValue)
  }
}

「Scound」とか www

続いて、デフォルトの値を上書きして変更します。

Environment の値の変更時には、View のツリー構造を思い浮かべながら影響範囲を考えます。

変更箇所は一行追加のみです。

Enviroment 定義時に extension も作成していますので、それを使っても等価です。


struct Root: View {
  var body: some View {
    First()
    Second()
      .environment(\.myCustomValue, "Another")  // *
      //.myCustomValue("Another") // * extension
  }
}

struct First: View {
  @Environment(\.myCustomValue) var myCustomValue

  var body: some View {
    Text("First " + myCustomValue)
  }
}

struct Second: View {
  @Environment(\.myCustomValue) var myCustomValue

  var body: some View {
    Text("Secound " + myCustomValue)
    Third()
  }
}

struct Third: View {
  @Environment(\.myCustomValue) var myCustomValue

  var body: some View {
    Text("Third " + myCustomValue)
  }
}

Second() に付けた .environment() で更新しています。

影響範囲は「その下位の View すべて」となります。

SwiftUI には、あらかじめ用意された便利な Environment がたくさんあります。

その中から、さらに、加えて font を使ってみます。


var font: Font?
The default font of this environment.

👉 EnvironmentValues | Apple Developer Documentation hatena-bookmark

定義 (extension を含む) の記述は不要なので

ツリー構造だけ気にしながら、

好きなところですばやく上書きしていくことができます。


struct Root: View {

  var body: some View {
    First()
      .environment(\.font, .caption) // *
      //.font(.caption) // * extension
    Second()
      .environment(\.myCustomValue, "Another")
      //.myCustomValue("Another")
      .font(.largeTitle) // * extension
  }
}

struct First: View {
  @Environment(\.myCustomValue) var myCustomValue
  var body: some View {
    Text("First " + myCustomValue)
  }
}

struct Second: View {
  @Environment(\.myCustomValue) var myCustomValue
  var body: some View {
    Text("Secound " + myCustomValue)
    Third()
  }
}

struct Third: View {
  @Environment(\.myCustomValue) var myCustomValue
  var body: some View {
    Text("Third " + myCustomValue)
      .font(.caption) // * extension
  }
}

プロパティラッパー @Environment の利用は不要で、

下位 View に適用されていきます。

さらに、それを上書きもできます。

しかし、「Scound」とか恥ずいわ。

 

🌝 まとめ

ある程度調べてからやってみたのですが、少しイメージと違いました。

- デフォルト値はプロパティとしてどの View でも取得できる。

- 値の変更時に範囲を考慮しながら上書きする。

- プロパティで取得しなくてもそのまま適用されるものもある。

ちなみに、GitHub で調べてみると一番使われてる Built-in EnvironmentValue は、


@Environment(\.dismiss) var dismiss

でした。タイプは DismissAction です。

👉 Environment | Apple Developer Documentation hatena-bookmark
👉 EnvironmentValues | Apple Developer Documentation hatena-bookmark
👉 EnvironmentKey | Apple Developer Documentation hatena-bookmark


【SwiftUI】.frame(width:height:alignment:) を連続チェインするとどうなるか

そもそもは、

GeometryReader で alignment が壊れるのが嫌

で調べていただけなのですが。

「そいつのサイズを指定するときは .frame()」

ぐらいに思っていました。

👉 frame(width:height:alignment:) | Apple Developer Documentation hatena-bookmark

実験です。

どうなると思いますか。

まさかの

「連続ネスト」

でした。

しかも、VStack でも重なるとは。

よって、わたしのコードも更新していきます。


なんとなく「フレーム」というネーミングの意味が分かったような気がします。

実は分かってないけど。


【Swift】配列をコンソールにテーブル形式で表示する

見づらい配列を Xcode コンソールにテーブル表示します。

というのをやってみました。

等幅フォント 英語:日本語 = 1:2 が必要です。


 

🤔 文字数のカウント

String.isASCII を使ってアスキー文字なら 半角 で 1、

その他は 全角 で 2、

としてカウントします。


print(
  Array("1234ご")
    .map { $0.isASCII ? 1 : 2 }
    .reduce(0, +)
)

// 6

Array.reduce() で一文字ごとのカウント数を合計しています。

👉 reduce(_:_:) | Apple Developer Documentation hatena-bookmark

こんなことができるんですね !

 

🤔 文字列のパディング

String.padding(toLength:withPad:startingAt:)

を使おうとしたけれど、

うまくいかなかったので以下のようにやります。


print(
  String(
    repeating: "*",
    count: 10 - 6
  ) + "みかん"
)

// ****みかん

半角10文字分まで文字列「みかん」をパディングしています。

👉 padding(toLength:withPad:startingAt:) | Apple Developer Documentation hatena-bookmark

 

🤔 まとめ

そんな処理を使って、

以下の順番で処理していきます。


1. 縦横を入れ替え(転置)したあと、

2. 1行ごとに最大半角文字数をカウントして、

3. それぞれをパディングして、

4. 再度転置して出力する

転置を使うことで、

テーブル縦方向の最大文字数を取得しやすくしています。

👉 【Swift】2次元配列 で 転置行列 ( transpose matrix ) hatena-bookmark



しかし、

絵文字の文字幅って微妙です。