#swift #swiftui #swiftui-view #swiftui-layout
Вопрос:
У меня есть следующий код, который выдает следующий результат.
var body: some View {
VStack(spacing: 0) {
HStack(spacing: 0) {
Rectangle()
.fill(Color.green)
.overlay(
VStack {
Text("11 / 11 /11 /111/1 111")
.font(.system(size: 100.0))
Text("data")
}
)
Rectangle()
.fill(Color.red)
.overlay(
VStack {
Text("111 / 111")
.font(.system(size: 100.0))
Text("data 2")
}
)
}
}
}
Как бы я выровнял текст data с текстом data 2 , даже если вид (текст) над ним намного больше , чем текст "11 / 11 /11 /111/1 111" , и из-за этого вид снизу будет смещен дальше вниз? Как бы я мог предотвратить это?
Я должен также упомянуть, что я не хочу "11 / 11 /11 /111/1 111" , чтобы меня урезали.
ПРАВКА: Это нормально, если этот длинный текст имеет меньший размер шрифта по сравнению с текстом под ним. Я тоже пробовал minimumScaleFactor , и нижний текстовый вид по-прежнему смещен относительно верхнего вида с длинным текстом.
Вот чего я хотел бы достичь.
Комментарии:
1. У вас есть переменное количество строк между двумя столбцами или это фиксированное количество?
2. @Yrb это переменное количество текста, а не строк
3. Можете ли вы загрузить изображение того, чего вы хотите достичь? Или вам все равно, пока нижние 2 строки ровные? И обязательно ли это должно быть наложение на прямоугольник, или оно должно просто так выглядеть?
4. @Yrb Я обновил пост тем, чего хотел бы достичь
5. Я не хочу начинать ответ и должен постоянно его менять. Как насчет очевидного
Spacer()различия междуText()взглядами вStack()с. Вы можете подложить нижние так, чтобы они были прибиты гвоздями к нижней части изображения.
Ответ №1:
Я бы просто поставил Spacer() s между вашими Text() s в VStack() s.
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
HStack(spacing: 0) {
Rectangle()
.fill(Color.green)
.overlay(
VStack {
Text("11 / 11 /11 /111/1 111")
.font(.system(size: 100.0))
Spacer() // add Spacer() here
Text("data")
.padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
}
)
Rectangle()
.fill(Color.red)
.overlay(
VStack {
Text("111 / 111")
.font(.system(size: 100.0))
Spacer() // add Spacer() here
Text("data 2")
.padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
}
)
}
}
}
}
Этот код оставляет вас с этим:
