Tata letak SwiftUI di dalam VStack menggunakan ViewModifiers

Saya memiliki tampilan sederhana dengan dua teks. body-nya seperti ini:

VStack {
    Text("One")
    Text("Two")
    Text("Three")
}

ini menghasilkan tampilan seperti:

Tata letak yang ada

Tapi yang saya inginkan adalah, hanya menggunakan pengubah pada tampilan Text (yaitu tanpa HStack dengan Spacers), dapatkan tata letak seperti:

Tata letak yang diinginkan

Apakah hal ini memungkinkan saat ini? Saya berharap membuat Texts lebar penuh dan kemudian hanya menggunakan perataan teks akan berhasil tetapi belum menemukan jawabannya.


swift swiftui vstack layout
person KerrM    schedule 20.03.2020    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Ya... karena tidak ada ketentuan atau batasan tambahan apa pun, hanya dengan menambahkan dua baris kode

Demo dalam Pratinjau (batas biru hanyalah pilihan dalam kode)

demo

    VStack {
        Text("One")
            .frame(maxWidth: .infinity, alignment: .leading)
        Text("Two")
        Text("Three")
            .frame(maxWidth: .infinity, alignment: .trailing)
    }
person Asperi    schedule 20.03.2020
comment
Terima kasih banyak! Dapatkah Anda memperkirakan kerugian menggunakan ini? yaitu apakah aneh menggunakan perataan bingkai untuk perataan teks? - person KerrM; 20.03.2020
comment
@KerrM, tidak, sebenarnya ini bukan teks (yaitu string) yang disejajarkan tetapi seluruh tampilan di dalam bingkai yang disediakan. Jadi jika Anda memasukkan teks yang sangat panjang, teks tersebut akan diisi dan dibungkus dengan cara biasa. Terlebih lagi karena tidak ada perubahan orientasi atau tata letak hardcode yang akan ditangani secara otomatis. - person Asperi; 20.03.2020

arrow_upward
1
arrow_downward

Ya, ini mungkin saja terjadi. Anda dapat mendefinisikan pengubah seperti:

extension View {
    func horizontalAlignment(_ alignment: HorizontalAlignment) -> some View {
        Group {
            if alignment == .leading {
                HStack {
                    self
                    Spacer()
                }
            } else if alignment == .trailing {
                HStack {
                    Spacer()
                    self
                }
            } else {
                self
            }
        }
    }
}

Dan gunakan seperti:

VStack {
    Text("One")
        .horizontalAlignment(.leading)
    Text("Two")
        .horizontalAlignment(.center)
    Text("Three")
        .horizontalAlignment(.trailing)
}

Tentu saja, berbagai pendekatan dapat dilakukan.

person cbjeukendrup    schedule 20.03.2020

arrow_upward
1
arrow_downward

Salah satu pendekatannya adalah dengan mengatur bingkai:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("One")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .leading)
            Text("Two")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .center)
            Text("Three")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .trailing)

        }
    }
}
person atomoil    schedule 20.03.2020