Разрешить флаттер-столбцу занимать все доступное пространство в таком макете

Question

У меня есть ListView.builder на моей странице, который оборачивает столбцы внутри него в соответствии с различными параметрами.

Мой код выглядит примерно так:

      ListView.builder(
  itemCount: sortedList.length,
  itemBuilder: (BuildContext context, int index) {
    Render Column 1,
    Render Column 2,
    Render Column 3
}

Мои столбцы выглядят примерно так:

      Column(
  mainAxisSize: MainAxisSize.min,
  children: [
   Child 1,
   Child 2,
  ]
)

Что я хочу ? Теперь, переходя к столбцу 3, я хочу, чтобы один дочерний элемент отображался вверху, а другой внизу экрана. Что-то вроде этого:

Как видите, я хочу, чтобы столбец 3 занимал все доступное пространство страницы, а затем он мог выровнять один из своих дочерних элементов по верхнему краю, а другой — по нижнему внутри себя . Я могу сделать это, просто добавив MainAxisAlignment.spaceBetween, но сейчас я не знаю, как разрешить этому столбцу занимать все доступное пространство внутри этого ListView.

Кто-нибудь может сказать мне, что мы можем здесь сделать? Заранее спасибо!

Answer 1

Чтобы заполнить оставшееся пространство, вам может потребоваться использовать CustomScroll, некоторые ленточные виджеты, которые вам подходят, и SliverFillRemaining , которое используется для заполнения оставшегося пространства прокрутки. Вы можете попробовать следующий пример на dartpad

      @override
Widget build(BuildContext context) {
return CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Container(color: Colors.red, height: 50.0),
          Container(color: Colors.purple, height: 75.0),
        ],
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Container(
        color: Colors.green,
        child: const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('remaining'),
        ),
      ),
    ),
  ],
);
}

Answer 2

Если вы не полагаетесь на представление списка, вы можете использовать этот подход:

      return Scaffold(
    body: Builder(
  builder: (context) => SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(
        minHeight: MediaQuery.of(context).size.height,
      ),
      child: IntrinsicHeight(
        child: SafeArea(
          child: Column(
            children: [
              Column(
                children: [
                  Text('Column1'),
                ],
              ),
              Column(
                children: [
                  Text('Column2'),
                ],
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Column 3 child 1'),
                    Text('Column 3 child 2'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
));