Căn chỉnh văn bản SwiftUI

Trong số nhiều thuộc tính của Textchế độ xem, tôi không thể tìm thấy bất kỳ thuộc tính nào liên quan đến căn chỉnh văn bản. Tôi đã thấy trong một bản demo rằng nó tự động xử lý RTL và khi đặt nội dung bằng View body, nó luôn tự động căn giữa nó.

Có một số khái niệm mà tôi đang thiếu về hệ thống bố cục trong đó SwiftUIvà nếu không, làm thế nào tôi có thể đặt các thuộc tính căn chỉnh văn bản thành Text?

Bạn có thể làm điều này thông qua công cụ sửa đổi .multilineTextAlignment(.center).

Tài liệu Apple

Từ SwiftUI beta 3 trở đi, bạn có thể căn giữa chế độ xem văn bản với công cụ sửa đổi khung:

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

Tôi đã cố gắng hiểu điều này như các câu trả lời khác ở đây đề cập đến Text.multilineTextAlignment(_:)/ VStack(alignment:)/ frame(width:alignment:)nhưng mỗi giải pháp giải quyết một vấn đề cụ thể. Cuối cùng, nó phụ thuộc vào yêu cầu giao diện người dùng và sự kết hợp của những điều này.

VStack(alignment:)

Ở alignmentđây là dành cho các quan điểm bên trong tương ứng với nhau.
Vì vậy, việc chỉ định .leadingsẽ liên kết tất cả các khung nhìn bên trong để phần đầu của chúng được liên kết với nhau.

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

Trong frame(width:alignment:)hoặc frame(maxWidth:alignment:), alignmentlà cho nội dung trong chiều rộng nhất định.

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

Các chế độ xem bên trong được căn hàng đầu tương ứng với nhau nhưng bản thân các chế độ xem được căn chỉnh theo sau tương ứng với VStack.

.multilineTextAlignment

Điều này chỉ định căn chỉnh của văn bản bên trong và có thể được nhìn thấy tốt nhất khi có nhiều dòng nếu không có dòng được xác định frame(width:alignment), chiều rộng được tự động điều chỉnh và bị ảnh hưởng bởi alignments mặc định .

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

Kiểm tra với các kết hợp:

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

Tôi đã thực sự gặp phải vấn đề mà tôi phải căn chỉnh văn bản trên một dòng. Những gì tôi tìm thấy để làm việc là:

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

Nếu bạn kết hợp điều này với tham số chiều rộng khung, bạn có thể nhận được một số định dạng khối văn bản đẹp cho các nhãn và những thứ tương tự.

Tôi đoán SwiftUImuốn chúng ta sử dụng các trình bao bọc như ngăn xếp cho những thứ như vậy.

Vì vậy, thay vì viết một cái gì đó như thế Text("Hello World").aligned(.leading), những điều sau được khuyến khích:

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

Nếu bạn muốn giữ độ rộng không đổi cho Văn bản, thì ".multilineTextAlignment (.leading)" sẽ không có hiệu lực cho đến khi chỉ có một dòng văn bản.

Đây là giải pháp phù hợp với tôi:

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


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

Sử dụng:

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

Chúng ta cần căn chỉnh Văn bản chứ không phải ngăn xếp. Vì vậy, việc gọi multilineTextAlignment(.center)và đặt giới hạn dòng, tôi có thể thấy văn bản được căn vào giữa. Tôi không biết tại sao tôi phải đặt giới hạn dòng, tôi nghĩ nó sẽ mở rộng nếu bạn có một văn bản lớn.

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

Bạn có thể đặt căn chỉnh cho Vertical stackView làm hàng đầu. Như bên dưới

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

Tôi muốn sử dụng chế độ xem Spacer () để căn chỉnh khối văn bản. Ví dụ này hiển thị văn bản ở phía sau:

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