Блог

 showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('HEADER'),
          Scrollbar(
            thickness: 5.0,
            radius: Radius.circular(5.0),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                ],
              ),
            ),
          ),
          Text('FOOTER'),
        ],
      ),
    );
  },
);
 

Хорошо, пока проблем нет. Я не упомянул isScrollControlled об showModalBottomSheet этом, чтобы вы не могли перетащить его вверх, чтобы заполнить экран. Я хочу, чтобы он был максимальным на половине высоты окна просмотра (что, я думаю, является ограничением по умолчанию?) Я также хочу, чтобы он соответствовал своему содержимому до тех пор, пока не достигнет этой максимальной высоты. Однако, если я добавлю больше виджетов к SingleChildScrollView Column нему, он переполнится:

Я ожидаю, что «тело» максимально увеличит свою высоту с оставшимся пространством между верхним и нижним колонтитулами и станет прокручиваемым, но оно просто становится неограниченным. Что я могу сделать, чтобы прокручивать только содержимое «body» showModalBottomSheet , когда оно достигло предела высоты?

Я только что добился этого с помощью нескольких изменений. isScrollControlled: true для нижнего листа и Flexible(child: ListView(...)) виджетов вместе.

Попробуйте, https://dartpad.dev/6f76b09c942f8c44d89504032c355ff5

 showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('HEADER'),
          Flexible(
            child: ListView(
              shrinkWrap: true,
              children: List<Text>.generate(1000, (x) => Text("CHILD")),
            ),
          ),
          Text('FOOTER'),
        ],
      ),
    );
  },
);