Флаттерные растянутые столбцы на всю высоту экрана
Все три элемента находятся в верхней части экрана и растягиваются, чтобы заполнить ширину, но я хочу, чтобы они растягивались, чтобы заполнить экран по вертикали сверху вниз.
Я пытался добавить Row ко всему, но выдает ошибку RenderFlex children have non-zero flex but incoming width constraints are unbounded? Поэтому я попытался обернуть это Row в виджет Expanded, который выдает ошибку «Расширенные виджеты должны быть помещены внутрь виджетов Flex».
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
children: <Widget>[
SizedBox(height: 20),
Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,//throws error
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Right', textAlign: TextAlign.center),
),
],
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Bottom', textAlign: TextAlign.center),
),
],
),
],
),
);
Ответы 5
окончательная редакция версии 4:
это должно работать со столбцами
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(height: 20),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Right', textAlign: TextAlign.center),
),
),
],
),
),
],
),
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text('Bottom', textAlign: TextAlign.center),
),
),
],
),
),
],
),
);
Хорошо, теперь это выглядит лучше, я думал, что вы везде используете MediaQuery. Но ты превратил Columns в containers? Они должны быть Columns.
забавная вещь.. если вы завернете свой внешний столбец в контейнер, вам вообще не нужно называть высоту..
Вы имеете в виду завернутые в контейнеры, завернутые в расширенные?
Да я тоже пока мучаюсь. Флаттер — это кошмар для такого рода вещей. Если бы это работало как CSS, лол.
Это немного работает, но нижний контейнер не имеет высоты. Вот как это для вас? Это должно выглядеть как на изображении, прикрепленном в другом ответе. Если вы измените цвета каждой коробки, будет легче понять, что я имею в виду.
Давайте продолжить обсуждение в чате.
Вы уверены, что все скобки правильные? У меня почему-то не получается это скопировать.
Вот способ равномерного распределения ваших контейнеров (как по горизонтали, так и по вертикали):
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Text('Right', textAlign: TextAlign.center),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Text('Bottom', textAlign: TextAlign.center),
),
),
],
),
);
Результат:
Выглядит хорошо, но текст в контейнерах должен быть в столбцах, как в моем исходном коде. Таким образом, каждая коробка может содержать несколько элементов.
Это правильно, просто нужна небольшая настройка. Вместо текстового виджета, являющегося дочерним элементом контейнера, дочерним элементом является столбец. Вам просто нужно добавить следующие параметры в столбец mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
Кроме того, вы можете использовать ListView вместо столбца, чтобы избежать предупреждений о переполнении содержимого.
Это больше похоже на то, что вам нужно?
Каждый контейнер содержит столбец, позволяющий добавлять несколько виджетов.
return Scaffold(
backgroundColor: Color(0xFF222222),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
],
),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
],
),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
],
),
),
),
],
),
),
);
О да, это выглядит хорошо. Я проверю это и вернусь к вам.
Чтобы заставить столбцы занимать всю ширину экрана и равномерно распределять высоту, я сделал следующее:
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: SizedBox(
width: double.infinity,
child: FlatButton(
onPressed: () {
playSound(1);
},
color: Colors.blue,
),
),
),
Виджет Расширенный будет иметь общую высоту, в то время как виджет Размерная коробка займет всю ширину, а для ширины установлено значение double.infinity.
Это может не дать прямого ответа на ваш вопрос
Column, по умолчанию растягивается до полной высоты (это можно изменить с помощью size: MainAxisSize.min), так что, возможно, вы говорите о растяжении дочерних элементов. Для этого вы должны использовать Expanded.
Column(
children: <Widget>[
ChildWidget1(),
Expanded( // <-- Use Expanded with SizedBox.expand
child: SizedBox.expand(
child: ChildWidget2(),
),
),
],
)
Вы используете звонки, чтобы получить высоту? Конечно, это не способ сделать это, он должен просто растягиваться, чтобы заполнить экран, как это делается с шириной в столбцах, используя
crossAxisAlignment: CrossAxisAlignment.stretch. Я уверен, что ему вообще не нужны никакие параметрыheight.