ListView или SingleChildScrollView переменного размера
Я хочу иметь виджет переменной высоты, который содержит ListView или SingleChildScrollView или что-то, что прокручивается.
Я пробовал сделать так:
Container(
color: Colors.pink,
child: Column(
children: [
Container(color: Colors.orange, child: Text("Header")),
SingleChildScrollView(
child: Container(
height: 10000,
color: Colors.green,
child: Text("the height of this content could be anything")),
),
Container(color: Colors.blue, child: Text("Footer")),
],
),
)
Это вызывает переполнение, потому что SingleChildScrollView расширяется до высоты 10000 пикселей. Если я заключаю его в Expanded, то он работает нормально, но тогда, если высота его дочернего элемента составляет, например, 200 вместо 10000, он все равно расширит родительский виджет на всю высоту экрана.
Возможно ли, чтобы высота прокрутки/списка подстраивалась под его содержимое и расширялась только на весь экран, если это необходимо?
Ответы 2
Вы можете сделать это, если знаете размер виджета footer и header и используете виджет LayoutBuilder для получения ограничений.
@override
Widget build(BuildContext newcontext) {
return Center(
child: Scaffold(
body: Container(
color: Colors.pink,
child: LayoutBuilder(
builder: (_, constraints) {
final sizeHeader = 150.0;
final sizeFooter = 150.0;
final sizeList = 1000.0;
final available =
constraints.maxHeight - (sizeHeader + sizeFooter);
Widget _buildCenterWidget() {
return Container(
height: sizeList,
color: Colors.green,
child: Text("the height of this content could be anything"),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: sizeHeader,
color: Colors.orange,
child: Text("Header")),
available < sizeList
? Expanded(
child: _buildCenterWidget(),
)
: _buildCenterWidget(),
Container(
height: sizeFooter,
color: Colors.blue,
child: Text("Footer")),
],
);
},
)),
),
);
}
Вы можете использовать Ограниченная коробка, чтобы указать minHeight, maxHeight для вашего виджета. Помните, что ни один из ваших виджетов не должен иметь бесконечную высоту/ширину, это портит пользовательский интерфейс, а также может вызывать ошибку.
К сожалению, я не знаю высоты верхнего или нижнего колонтитула, но я как-нибудь заставлю это работать.