Open5

左側にアイテムを置いて、ラベルを画面の中央に配置するには

Muukii - Kimura HiroshiMuukii - Kimura Hiroshi

NavigationBar的なUIを作ってる
左にボタン、中央にラベル
この時、ラベルを画面の中央に置くにはどうするのか?

Muukii - Kimura HiroshiMuukii - Kimura Hiroshi

import SwiftUI

private struct _Book: View {
  
  var body: some View {
    ZStack {
      HStack {
        Rectangle().frame(width: 1)
      }
      
      HStack {
        Text("👾👾👾👾👾👾👾👾👾👾👾👾")
          .anchorPreference(key: MyPreferenceKey.self, value: .bounds) { anchor in
            return anchor
          }
        Spacer()
      }
      .overlayPreferenceValue(MyPreferenceKey.self, alignment: .center) { anchor in
        if let anchor = anchor {
          GeometryReader { proxy in
            HStack {
              Spacer(minLength: proxy[anchor].width)
              
              Text("TitleTitleTitle")
              Spacer()
            }
            .frame(maxWidth: .infinity)
          }
        }
      }
      .frame(maxWidth: .infinity)      
     
    }
  }
}

private enum MyPreferenceKey: PreferenceKey {
  
  static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
    value = value ?? nextValue()
  }

  static var defaultValue: Anchor<CGRect>? {
    nil
  }
}

#Preview("Navigation Layout") {
  _Book()
}

Muukii - Kimura HiroshiMuukii - Kimura Hiroshi

HStackを分割してラベルをcontainerに対してセンタリング
その際にスペーサーを置いといて左側のアイテムに重なって欲しくない領域を確保する
左側のアイテムの大きさはanchor-preferenceを使って連携