Allineamento del testo SwiftUI

Tra le molte proprietà della Textvista, non sono riuscito a trovare nessuna relativa all'allineamento del testo. Ho visto in una demo che gestisce automaticamente l'RTL e quando si posiziona qualcosa utilizzando View's body, lo centra sempre automaticamente.

C'è qualche concetto che mi manca sul sistema di layout SwiftUIe, in caso contrario, come posso impostare le proprietà di allineamento del testo su Text?

Puoi farlo tramite il modificatore .multilineTextAlignment(.center).

Documentazione Apple

Da SwiftUI beta 3 in avanti, puoi centrare una visualizzazione di testo con il modificatore di frame:

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

Stavo cercando di capirlo da solo mentre altre risposte qui menzionano Text.multilineTextAlignment(_:)/ VStack(alignment:)/ frame(width:alignment:)ma ogni soluzione risolve un problema specifico. Alla fine dipende dai requisiti dell'interfaccia utente e da una combinazione di questi.

VStack(alignment:)

Il alignmentqui è per le viste interiori l'una rispetto all'altra.
Quindi la specifica .leadingassocia tutte le viste interne per avere la loro interlinea allineata l'una con l'altra.

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

In frame(width:alignment:)o frame(maxWidth:alignment:), alignmentè per i contenuti entro la larghezza data.

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))

Le viste interne sono allineate in prima linea l'una rispetto all'altra, ma le viste stesse sono allineate in coda rispetto alle VStack.

.multilineTextAlignment

Questo specifica l'allineamento del testo all'interno e può essere visto meglio quando ci sono più righe altrimenti senza un definito frame(width:alignment), la larghezza viene regolata automaticamente e viene influenzata dalle alignments di default .

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))

Test con combinazioni:

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))

In realtà mi sono imbattuto nel problema in cui dovevo allineare il testo su una singola riga. Quello che ho scoperto funzionare è questo:

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

Se lo combini con il parametro della larghezza della cornice puoi ottenere una bella formattazione del blocco di testo per etichette e simili.

Immagino che SwiftUIvoglia che usiamo wrapper come stack per queste cose.

Quindi, invece di scrivere qualcosa di simile Text("Hello World").aligned(.leading), si incoraggia quanto segue:

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

Dobbiamo allineare il testo e non la pila in cui si trova. Quindi chiamando multilineTextAlignment(.center)e impostando i limiti di linea posso essere in grado di vedere i testi allineati al centro. Non so perché devo impostare i limiti di riga, ho pensato che si espanderebbe se avessi un testo di grandi dimensioni.

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

Se desideri mantenere la larghezza costante per il testo, ".multilineTextAlignment (.leading)" non avrà alcun effetto finché non sarà presente una sola riga di testo.

Questa è la soluzione che ha funzionato per me:

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


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

Utilizzo:

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

È possibile impostare l'allineamento per StackView verticale come interlinea. Come sotto

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

Vorrei usare la Spacer()vista per allineare il blocco di testo. Questo esempio mostra il testo sul lato finale:

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