Макет SwiftUI внутри VStack с использованием ViewModifiers - PullRequest
0 голосов
/ 20 марта 2020

У меня простой вид с двумя текстами. Его body выглядит следующим образом:

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

это создает вид:

Existing layout

Но я бы хотел, чтобы , используя только модификаторы для Text видов (т. е. не HStack с Spacer s), получим макет, подобный:

Desired layout

Is это в настоящее время возможно? Я надеялся как-то сделать полную ширину Text s, а затем просто использовать выравнивание текста, но пока не понял.

Ответы [ 3 ]

2 голосов
/ 20 марта 2020

Ну ... поскольку никаких дополнительных условий или ограничений нет, просто добавили две строки кода

Демонстрация в режиме предварительного просмотра (синяя рамка - это просто выделение в коде)

demo

    VStack {
        Text("One")
            .frame(maxWidth: .infinity, alignment: .leading)
        Text("Two")
        Text("Three")
            .frame(maxWidth: .infinity, alignment: .trailing)
    }
1 голос
/ 20 марта 2020

Один из подходов - просто установить кадр:

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)

        }
    }
}
1 голос
/ 20 марта 2020

Да, это может быть возможно. Вы можете определить модификатор как:

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

И использовать его как:

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

Конечно, возможно несколько подходов.

...