SwiftUI - как выровнять текст относительно текста ниже - PullRequest
0 голосов
/ 14 марта 2020

На изображении ниже у меня есть имя и фамилия. Я бы хотел, чтобы фамилия центрировалась, как показано средней синей линией, а имя выровнено по левому краю с фамилией, как показано первой синей линией. Я использую GeometryReader, чтобы установить вертикальную позицию, основанную на процентах от общей высоты, но я не знаю, как получить нижнюю позицию текста и передать ее верхней.

struct NameText: View {
    var body: some View {
        GeometryReader { geo in
            VStack {
                Text("PETER")
                    .fontWeight(.bold)
                    .font(.title)
                    .foregroundColor(Color(red: 30/255, green: 82/255, blue: 132/255, opacity: 1.0))
                    .offset(x: 0, y: geo.size.height * -0.75)
                Text("PARKER")
                    .fontWeight(.thin)
                    .font(.largeTitle)
                    .offset(x: 0, y: geo.size.height * -0.75)
            }
        }
    }
}

enter image description here

Ответы [ 2 ]

1 голос
/ 14 марта 2020
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("PETER")
            Text("PARKER").font(.largeTitle)
        }
    }
}

enter image description here

0 голосов
/ 14 марта 2020

Из-за разницы в весе шрифта требуется некоторая компенсация, поэтому я бы предложил такой подход, как показано ниже

demo

struct NameText: View {
    var body: some View {
        GeometryReader { geo in
            VStack(alignment: .leading) {
                Text("PETER")
                    .fontWeight(.bold)
                    .font(.title)
                    .foregroundColor(Color(red: 30/255, green: 82/255, blue: 132/255, opacity: 1.0))
                Text("PARKER")
                    .fontWeight(.thin)
                    .font(.largeTitle)
                    .offset(x: -0.5)
            }//.border(Color.blue) // << just helper for Pixie verification
        }
    }
}
...