SwiftUI 텍스트 정렬

Text뷰 의 많은 속성 중 텍스트 정렬과 관련된 항목을 찾을 수 없습니다. 데모에서 RTL을 자동으로 처리하고 View 's를 사용하여 항목을 배치 할 때 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의 영향을받습니다 .

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

우리는 텍스트가있는 스택이 아니라 텍스트를 정렬해야합니다. 따라서 multilineTextAlignment(.center)라인 제한을 호출 하고 설정하면 텍스트가 중앙에 정렬 된 것을 볼 수 있습니다. 줄 제한을 설정해야하는 이유를 모르겠습니다. 텍스트가 크면 확장 될 것이라고 생각했습니다.

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

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

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

Spacer ()보기를 사용하여 텍스트 블록을 정렬하고 싶습니다. 이 예는 후행에 텍스트를 표시합니다.

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