Отображение текстовых полей в проблеме со строкой и столбцом - Flutter
я хочу, чтобы TextFields находились в виджете строки или столбца в зависимости от ширины экрана. Текстовые поля в строке должны находиться в другом виджете, например расширенном, чтобы ограничить их ширину и не допускать ошибок. но когда они находятся в виджете «Столбец», они исчезают и должны удалить виджет «Расширенный».
Я использовал виджет Flex, чтобы изменить направление в зависимости от ширины. я думал о создании двух отдельных виджетов, но это не чисто. это код, который работает, когда направление вертикальное:
Flex(
direction: MediaQuery.sizeOf(context).width < 500
? Axis.vertical
: Axis.horizontal,
// direction: Axis.vertical,
children: [
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'name',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
),
textAlign: TextAlign.right,
controller: costomerNameCon,
),
const SizedBox(
width: 10,
),
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'phone',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
labelStyle: TextStyle()),
textAlign: TextAlign.right,
controller: costomerPhoneCon,
),
const SizedBox(
width: 10,
),
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'email',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
labelStyle: TextStyle()),
textAlign: TextAlign.right,
controller: costomerEmailCon,
),
],
)
Есть ли способ справиться с этим?
@NguyễnMinhKhoa, можешь объяснить подробнее, пожалуйста? Я думаю, если еще будет дубликат кода. и проблема не в использовании flex, мне нужен виджет, который будет работать как в строке, так и в столбце.
Ответы 1
Я считаю, что это распространенная проблема с виджетами Flex или Row: InputDecorator, который обычно создается с помощью TextField, не может иметь неограниченную ширину. Дочерним виджетам не следует давать неограниченную ширину. Попробуйте изменить mainAxisSize на min, так как по умолчанию установлено max и max заставляет дочерние элементы занимать как можно больше места.
Flex(
direction: MediaQuery.sizeOf(context).width < 500
? Axis.vertical
: Axis.horizontal,
// direction: Axis.vertical,
mainAxisSize: MainAxisSize.min, // add this
children: [
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'name',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
),
textAlign: TextAlign.right,
controller: costomerNameCon,
),
const SizedBox(
width: 10,
),
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'phone',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
labelStyle: TextStyle()),
textAlign: TextAlign.right,
controller: costomerPhoneCon,
),
const SizedBox(
width: 10,
),
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'email',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
labelStyle: TextStyle()),
textAlign: TextAlign.right,
controller: costomerEmailCon,
),
],
)
И теперь текстовые поля справа будут переполнены. Поэтому лучше всего обернуть каждый из них гибким виджетом, чтобы ограничить его размером экрана:
Flex(
direction: MediaQuery.sizeOf(context).width < 500
? Axis.vertical
: Axis.horizontal,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(child: TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'name',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
),
textAlign: TextAlign.right,
controller: costomerNameCon,
),),
const SizedBox(
width: 10,
),
Flexible(child: TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'phone',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
labelStyle: TextStyle()),
textAlign: TextAlign.right,
controller: costomerPhoneCon,
)),
const SizedBox(
width: 10,
),
Flexible(child: TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'email',
floatingLabelAlignment: FloatingLabelAlignment.start,
isDense: true,
labelStyle: TextStyle()),
textAlign: TextAlign.right,
controller: costomerEmailCon,
)),
],
)
спасибо за ваш точный ответ, но можете ли вы объяснить, в чем разница между гибким и расширенным и почему расширенный здесь не работает? сообщение, на которое вы ответили, использовало расширенный вариант для этой проблемы.
Гибкий говорит детям, чтобы они занимали столько места, сколько необходимо. Но Expanded советует детям занимать как можно больше места. Поскольку родительский виджет ограничивает дочерние элементы с помощью mainAxisSize: MainAxisSize.min, использование Expanded будет конфликтовать с этой директивой. Итак, в вашем случае имеет смысл использовать «Гибкий», а в других случаях можно использовать «Расширенный».
Используйте, если else достаточно, то модификатор, не используйте Flex для чего-то подобного