#flutter #text #size
#flutter #текст #размер
Вопрос:
Мне нужно исправить минимальную ширину для моих виджетов столбцов. Внутри каждого из них у меня есть текстовые виджеты, которые могут быть очень короткими или очень длинными. Мне нужно установить для них минимальную ширину, чтобы иметь приемлемый размер столбца, даже если текст короткий. Очевидно, что другой столбец должен адаптироваться.
Row(children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child: RichText(
text: TextSpan(
text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
],
),
],
)
Ответ №1:
Вероятно, есть дюжина способов сделать то, что вы хотите. И, вероятно, ни один из них не является простым или понятным. (Тема ограничений и размеров довольно сложная. Смотрите Эту страницу ограничений для получения дополнительных примеров и пояснений.)
Вот одно из возможных решений.
Это установит минимальную ширину для синего столбца (на основе stepWidth
), но будет расширяться / увеличиваться, если этого захочет текст (дочерний элемент) внутри.
Размер желтого столбца будет соответствовать размеру синего столбца.
class ExpandedRowPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Row Page'),
),
body: SafeArea(
child: Center(
child: Row(
children: [
IntrinsicWidth(
stepWidth: 100,
// BLUE Column
child: Container(
color: Colors.lightBlueAccent,
child: Column(
children: [
//Text('Short'),
Text('shrt')
],
)
),
),
// YELLOW Column
Flexible(
child: Container(
alignment: Alignment.center,
color: Colors.yellow,
child: Column(
children: [
Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
],
)
),
)
],
)
),
),
);
}
}
Вы могли бы сделать вышеописанное без Flexible
желтого столбца, но очень длинный дочерний текст вызовет предупреждение о переполнении без гибкого или расширенного виджета переноса.
Виджет строки сам по себе имеет ограничение на бесконечную ширину. Поэтому, если дочерний элемент хочет быть больше ширины экрана, он может и вызовет переполнение. (Попробуйте удалить Flexible
выше и перестроить, чтобы увидеть.)
Гибкий и расширенный, используется только внутри строки и столбца (или Flex, их суперкласса), проверяет ширину экрана и другие виджеты внутри строки и предоставляет своим дочерним элементам определенный размер ограничения вместо бесконечного. Дочерние элементы (внутри Flexible / Expanded) теперь могут искать родительское ограничение и соответственно изменять свой размер.
Например, текстовый виджет будет переносить свой текст, когда он слишком широк для ограничений, заданных Flexible / Expanded .
Ответ №2:
используйте FittedBox();
предположим, пример:
Row(
children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child:
FittedBox(
child: RichText(
text: TextSpan(
text:
"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
),
],
),
],
);
Комментарии:
1. Как я должен его использовать? Я попытался обернуть свой текст и форматированный текст с помощью FittedBox, но, похоже, это не работает, можете ли вы привести мне более подробный пример?
2. проверьте, что я отредактировал его с помощью вашего кода, и посмотрите, работает ли FittedBox
3. Спасибо! Но я не хочу, чтобы размер моего текста изменялся, есть ли другой способ?
4. Transform.scale( масштаб: ширина <= 420 ? 0,5 : 0,8, дочерний элемент: Выровнять ( дочерний элемент: Контейнер( выравнивание: Alignment.center, ширина: 420, высота: 420, цвет: Colors.red, дочерний элемент: Текст (‘Пример’, стиль: TextStyle(размер шрифта: 50),), ), ),
5. вы можете использовать масштаб преобразования, если не хотите, чтобы размер текста изменялся