У меня есть Text
с фоном (это просто цветной пузырь), и я пытаюсь ограничить его maxWidth
некоторой шириной, скажем 200
для этого примера.
У меня проблема с .frame(..., maxWidth: ...)
.
maxWidth
и будут переноситься без усечения текста.background()
и .frame()
, Text
всегда отображается так, как я установил maxWidth
.Более детально:
Применение .background()
перед .frame(maxWidth: 200)
:
Text(...)
.fixedSize(horizontal: false, vertical: true)
.background(
Rectangle()
)
.frame(maxWidth: 200)
Это приводит к тому, что рамка всех Text
имеет ширину 200, чего я не понимаю. Я понимаю, что фон наносится раньше, поэтому размер фона правильный, но почему рамка становится максимальной ширины? Я неправильно понимаю, как работает рамка maxWidth:
?
Это поведение точно такое же без модификатора .fixedSize()
, так как все, что он делает, это предотвращает усечение текста в ...
Применение .background()
после .frame(maxWidth: 200)
:
Text(...)
.fixedSize(horizontal: false, vertical: true)
.frame(maxWidth: 200)
.background(
Rectangle()
)
Это снова показывает поведение, но на этот раз с фоном, также затронутым рамкой. Ожидается поведение наложения модификаторов, но опять же, я не уверен, почему текст расширяется до maxWidth
.
Для получения дополнительной информации, эти Text
находятся внутри HStack
с Spacer()
слева. HStack
находятся внутри большего VStack
+ScrollView
.
Удаление HStack
, Spacer()
или ScrollView/VStack
не меняет этого поведения.
Я пытался присвоить ему minWidth
и применять другие модификаторы, но безрезультатно. Любая помощь приветствуется, так как я чувствую, что упускаю что-то очень очевидное!
Спасибо.
Обновлено: большая краткость.
Извините, если я не понял, ожидаемый пользовательский интерфейс должен быть таким, чтобы текстовые пузыри были такими большими, какими они должны быть (не все расширяются до максимальной ширины). Все они должны быть выровнены вправо с прокладкой.
Вы должны применять .frame(maxWidth:)
к VStack
, а не к каждому Text
.
struct TestView: View {
var body: some View {
VStack {
HStack {
MyText(text: "111")
MyText(text: "111")
}
MyText(text: "222222222")
MyText(text: "3333333333333")
MyText(text: "Long long long long long long long long long long text")
}
.frame(maxWidth: 200) // << there
}
struct MyText: View {
var text: String
var body: some View {
Text(text)
.padding(6)
.background(
Rectangle()
.fill(.yellow)
)
.border(.blue)
}
}
}
Синяя рамка представляет собой фактические Text
размеры кадра.
Если вам нужно выравнивание по хвосту, то вы должны установить его в VStack(alignment: .trailing)
.
Если вам также нужно выравнивание внутри фрейма Text
, вы можете применить .multilineTextAlignment(.trailing)
к Text
.
Большое спасибо за это подробное объяснение. Мне нужно подправить свое понимание того, как модификаторы работают с текстом!
Ожидаете ли вы интерфейс, как на первом изображении?