SwiftUI 텍스트 정렬

SwiftUI 텍스트 정렬

의 많은 속성 중Text보기, 텍스트 정렬과 관련된 항목을 찾을 수 없습니다.데모에서 본 적이 있는데, 자동으로 RTL을 처리하고 View를 사용하여 데이터를 배치할 때body항상 자동으로 중앙에 배치됩니다.

에서의 레이아웃 시스템에 대해 제가 놓치고 있는 개념이 있나요?SwiftUI그렇지 않은 경우 텍스트 정렬 속성을 어떻게 설정합니까?Text?

이 작업은 수식자를 통해 수행할 수 있습니다..multilineTextAlignment(.center).

Text("CENTER")
    .multilineTextAlignment(.center)

Apple 문서

Swift에서UI 베타 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)폭은 자동으로 조정되며 기본값이 적용됩니다.alignments.

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

실제로 텍스트를 한 줄에 맞춰야 하는 문제에 부딪혔습니다.제가 알아낸 것은 다음과 같습니다.

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)

텍스트의 너비를 일정하게 유지하려면 .multiline:TextAlignment(.leading)"는 텍스트가 한 줄만 있을 때까지 적용되지 않습니다.

이것은 나에게 효과가 있었던 솔루션입니다.

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)

저도 같은 문제가 있었어요.그걸 고치는데 이걸 썼어

Text("Test")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)

Vertical stack View의 정렬을 선행으로 설정할 수 있습니다.아래와 같이

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

Spacer()텍스트 블록을 정렬합니다.다음 예제에서는 후행 측에 텍스트를 보여 줍니다.

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

언제든지 텍스트 필드에 프레임을 추가하고 프레임의 정렬을 수정할 수 있습니다.

Text("Hello World!")
   .frame(alignment : .topLeading)

이것은 단지 몇 개의 회선만을 대상으로 하고 있기 때문에, 어느쪽의 스택에 얼라인먼트를 사용하는 것보다 낫다.

이것이 당신이 원하는 답인지 확실하지 않지만, 나는 Swift를 경험했다.아랍어와 같은 언어에서는 UI가 자동으로 RTL로 전환되므로 UI에서처럼 명시적으로 지정할 필요가 없습니다.

Swift의 이 속성을 사용할 수 있습니다.UI

여러 줄의텍스트 정렬

TextAlignment의 경우.

VStack { 
    Text("Your Text")
      .multilineTextAlignment(.center)
}

: " ".center

정의할 수 .multilineTextAlignment()'CHANGE: 'CHANGE: 'CHANGE:

import SwiftUI

extension View {
    func multilineTextAlignment() -> some View {
        ModifiedContent(content: self, modifier: AlignedText())
    }
}

struct AlignedText : ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(.white)
            .background(.black)
            .multilineTextAlignment(.center)
    }
}

나서...을 사용하여multilineTextAlignment()명시적 매개 변수 값을 지정하지 않습니다.

struct ContentView : View {
    var body: some View {
        Text("SwiftUI SwiftUI SwiftUI SwiftUI SwiftUI")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .font(.largeTitle)
            .multilineTextAlignment()    // Center alignment is a new DEFAULT
    }
}

언급URL : https://stackoverflow.com/questions/56443535/swiftui-text-alignment