#flutter #dart
Вопрос:
Я пытаюсь заставить контейнер 3 (синий) расшириться, чтобы покрыть оставшуюся ниже область, которая заканчивается на нижнем уровне желтого поля. Желтая коробка имеет переменную высоту, которая будет зависеть от роста детей и может быть любой.
Я попытался обернуть контейнер 3 расширенным, но получил следующую ошибку
Дочерние элементы RenderFlex имеют ненулевую гибкость, но входящие ограничения по высоте неограниченны.
код
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Container(
color: Colors.deepOrange[50],
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(2),
color: Colors.red,
width: double.infinity,
child: Text("1"),
),
Container(
padding: EdgeInsets.all(2),
color: Colors.green,
width: double.infinity,
child: Text("2"),
),
Container(
padding: EdgeInsets.all(2),
color: Colors.blue,
width: double.infinity,
child: Text("3"),
),
],
)
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: BoxDecoration(
color: Colors.amberAccent,
borderRadius: BorderRadius.all(Radius.circular(5))
),
child: Column(
children: [
Text("---"),
Text("Variable"),
Text("Height"),
Text("---"),
],
),
),
)
],
)
],
),
)
],
),
),
);
Ответ №1:
Проблема здесь в том , что вы не предоставляете никакой высоты своему Row() контейнеру, поэтому всякий раз, когда вы заворачиваете в него этот контейнер, у Expanded() него нет никаких ограничений на то, насколько он может расширяться.
Что вы можете сделать в этой ситуации, так это предоставить SizedBox() вам заданную высоту Row() , а затем применить Expanded() к вашему контейнеру, что-то вроде этого:
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
SizedBox( //Add this SizedBox()
height: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(2),
color: Colors.red,
width: 50,
child: const Text("1"),
),
Container(
padding: const EdgeInsets.all(2),
color: Colors.green,
width: 50,
child: const Text("2"),
),
Expanded(
child: Container(
padding: const EdgeInsets.all(2),
color: Colors.blue,
width: 50,
child: const Text("3"),
),
),
],
),
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: const BoxDecoration(
color: Colors.amberAccent,
borderRadius: BorderRadius.all(Radius.circular(5))
),
child: Column(
children: const [
Text("---"),
Text("Variable"),
Text("Height"),
Text("---"),
],
),
),
),
],
),)
],
),
),
);
Комментарии:
1. Привет, Ришик, спасибо тебе за твой ответ, однако это решает часть проблемы. Он действительно расширяет синий контейнер (3), но затем не позволяет желтому контейнеру расти. Вся проблема здесь в том, что высота желтого контейнера неизвестна, и он должен расти, если этого требует его содержимое. по этой причине я не могу исправить размер строки. Идея состоит в том, что если растет желтый контейнер, то должен расти и синий контейнер.
2. Видите ли, дело в том, что Expanded() так не работает, Expanded попытается занять все место в этом каркасе (), вот почему используется Container (), поскольку он обертывается до размера своего содержимого. Но опять же, ваши компоненты не настолько велики, чтобы получить желаемый результат, а это значит, что вам нужно либо придать переменную высоту SizedBox (), который я добавил, либо добавить все элементы столбца() ниже, чтобы функция Expanded() для контейнера(3) получила некоторое ограничение по высоте.
3. Похоже, мне нужна фиксированная высота для желтого ящика. Это становится ограничением для моего требования, однако я не вижу другого решения. В любом случае, спасибо, Ришик.