SwiftUIのテキスト配置

Textビューの多くのプロパティの中で、テキストの配置に関連するものは見つかりませんでした。デモでRTLを自動的に処理し、Viewを使用してコンテンツを配置すると、body常に自動的に中央に配置されることを確認しました。

のレイアウトシステムについて欠落している概念はありますか？SwiftUIそうでない場合は、テキスト配置プロパティをに設定するにはどうすればよいTextですか？

これは、修飾子を介して行うことができます.multilineTextAlignment(.center)。

Appleドキュメント

SwiftUIベータ3以降では、フレーム修飾子を使用してテキストビューを中央に配置できます。

Text("Centered")
    .frame(maxWidth: .infinity, alignment: .center)

ここでは他の回答が言及としてこれを自分自身を理解しようとしていたText.multilineTextAlignment(_:)/ VStack(alignment:)/frame(width:alignment:)しかし、それぞれのソリューションは、特定の問題を解決します。最終的には、UI要件とこれらの組み合わせによって異なります。

VStack(alignment:)

alignmentここでは、互いにそれぞれの内側のビューのためです。
したがって、指定.leadingすると、すべての内部ビューが関連付けられ、先頭が互いに整列します。

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
        .background(Color.gray.opacity(0.2))
  Text("sit amet")
        .background(Color.gray.opacity(0.2))
}
.background(Color.gray.opacity(0.1))

.frame

中frame(width:alignment:)またはframe(maxWidth:alignment:)、alignment所定の幅内の内容のためのものです。

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
      .background(Color.gray.opacity(0.2))
  Text("sit amet")
      .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

内側のビューは、互いにそれぞれに整列して先頭に配置されていますが、ビュー自体は、にそれぞれに末尾に配置されていVStackます。

.multilineTextAlignment

これは、内部のテキストの配置を指定し、定義されていない複数の行がある場合に最もよく表示frame(width:alignment)されますalignment。幅は自動的に調整され、デフォルトのsの影響を受けます。

VStack(alignment: .trailing, spacing: 6) {
  Text("0. automatic frame\n+ view at parent's specified alignment\n+ multilineTA not set by default at leading")
    .background(Color.gray.opacity(0.2))
  Text("1. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .background(Color.gray.opacity(0.2))
  Text("2. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

組み合わせによるテスト：

VStack(alignment: .trailing, spacing: 6) {
  Text("1. automatic frame, at parent's alignment")
  .background(Color.gray.opacity(0.2))
  Text("2. given full width & leading alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .leading)
  .background(Color.gray.opacity(0.2))
  Text("3. given full width & center alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("4. given full width & center alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("5. given full width & center alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("6. given full width but no alignment\n+ multilineTA at default leading\n+ leading is based on content, looks odd sometimes as seen here")
  .frame(maxWidth: .infinity)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380)
.background(Color.gray.opacity(0.1))

私は実際に、テキストを1行に揃えなければならないという問題に遭遇しました。私がうまくいくことがわかったのはこれです：

Text("some text")
    .frame(alignment: .leading)

これをフレーム幅パラメータと組み合わせると、ラベルなどの優れたテキストブロックフォーマットを取得できます。

SwiftUIそのようなことには、スタックのようなラッパーを使用したいと思います。

したがってText("Hello World").aligned(.leading)、のようなものを書く代わりに、次のことが推奨されます。

VStack(alignment: .leading) {
    Text("Hello World")
}

スタックではなくテキストを整列させる必要があります。したがってmultilineTextAlignment(.center)、行制限を呼び出して設定すると、テキストが中央に整列されているのを確認できます。なぜ行制限を設定する必要があるのか​​わかりません。大きなテキストがあると拡張されると思いました。

Text("blahblah")
        .font(.headline)
        .multilineTextAlignment(.center)
        .lineLimit(50)

テキストの幅を一定に保ちたい場合、「。multilineTextAlignment（.leading）」は、テキストが1行になるまで効果がありません。

これは私のために働いた解決策です：

struct LeftAligned: ViewModifier {
    func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
        }
    }
}


extension View {
    func leftAligned() -> some View {
        return self.modifier(LeftAligned())
    }
}

使用法：

Text("Hello").leftAligned().frame(width: 300)

垂直stackViewの配置を先頭に設定できます。以下のように

 VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }

Spacer()ビューを使用してテキストブロックを整列させたいのですが。この例では、末尾にテキストを表示しています。

HStack{
    Spacer()
    Text("Wishlist")
}