Как заставить стол Flutter растягиваться вертикально

#flutter #flutter-layout #cross-platform

Вопрос:

Я новичок в Flutter и не могу заставить свой стол занимать все доступное пространство вертикально.

Вот код:

 home: Scaffold(appBar: AppBar(),  body: Table(  children: [  TableRow(  children: [  TextButton(onPressed: () {}, child: Text('1')),  TextButton(onPressed: () {}, child: Text('2')),  ]  )  ]  )  )

Вот что я вижу прямо сейчас:

1. можете ли вы попробовать обернуть всю таблицу расширенным виджетом

2. Спасибо, но Флаттеру не понравилось помещать таблицу в расширенный виджет 🙁

3. Было бы полезно увидеть ваш код за пределами виджета таблицы, т. е. за пределами вашего макета.

4. я думаю, что вы должны использовать столбец для своего использования.

5. @user1032613 Это все мое приложение

Ответ №1:

Заполнение пространства по вертикали не так прямолинейно и не является поведением по умолчанию, как для горизонтальной части. Это потому, что вам обычно не нужно такое поведение: большую часть времени вы хотите, чтобы сам контент определял пространство по вертикали и делал просмотр прокручиваемым, если в нем слишком много контента (и, следовательно, недостаточно свободного места). Есть также случаи для горизонтально прокручиваемых элементов, но тогда это особое поведение.

Если вы настаиваете на принудительном заполнении пространства по вертикали, вам нужно сделать это вручную. В этом случае вам необходимо определить доступное пространство и установить высоту ваших элементов. Лучший способ определить доступное пространство-использовать LayoutBuilder виджет, который предоставляет вам эту информацию и обновляет его поддерево, если эта информация изменится (поскольку это виджет-конструктор).

Здесь вы можете увидеть приблизительное и упрощенное решение, использующее этот подход и ваш пример (я включил границы, чтобы они также были видны:

 LayoutBuilder(  builder: (context, constraints) =gt; Table(  border: TableBorder.all(),  children: [  TableRow(  children: [  SizedBox(  height: constraints.maxHeight / 2,  child: Align(  child: ElevatedButton(  onPressed: () {},  child: Text('1'),  ),  ),  ),  SizedBox(  height: constraints.maxHeight / 2,  child: Align(  child: ElevatedButton(  onPressed: () {},  child: Text('2'),  ),  ),  ),  ],  ),  TableRow(  children: [  SizedBox(  height: constraints.maxHeight / 2,  child: Align(  child: ElevatedButton(  onPressed: () {},  child: Text('3'),  ),  ),  ),  SizedBox(  height: constraints.maxHeight / 2,  child: Align(  child: ElevatedButton(  onPressed: () {},  child: Text('4'),  ),  ),  ),  ],  ),  ],  ), ),

1. Спасибо, @Kounex. Я пытаюсь создать клавиатуру калькулятора, и я действительно не хочу давать пользователю возможность прокручивать. Я попробую ваше решение, но я надеялся на что-то более простое.

Ответ №2:

В итоге я отказался от использования таблицы и вместо этого использовал виджеты столбцов и строк. Вот мой новый код:

 Column(  children: [  Expanded(  child: Row(  crossAxisAlignment: CrossAxisAlignment.stretch,  children: [  Expanded(child: TextButton(  child: Text('1'),  onPressed: () {},  )),  Expanded(child: TextButton(  child: Text('2'),  onPressed: () {},  )),  ]),  ),  ] );