Flutter: DraggableScrollableSheet покрывает весь экран, когда он появляется - PullRequest
Новая
       85

Flutter: DraggableScrollableSheet покрывает весь экран, когда он появляется

2 голосов
/ 15 марта 2020

При нажатии я выполняю следующую функцию, которая должна заставить нижний лист появляться обычным образом (прокручивая снизу вверх): 

showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      isScrollControlled: true,
      isDismissible: true,
      backgroundColor: Colors.white,
      builder: (context) => ChooseTimeDialog(),
    );

Нижний лист, который должен появиться, должен прокручиваться. Код для него выглядит следующим образом: 

class ChooseTimeDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.4,
      minChildSize: 0.2,
      maxChildSize: 0.6,
      builder: (context, scrollController) {
        return SingleChildScrollView(
          controller: scrollController,
          child: Container(
            color: Colors.blue,
            height: 300,
            width: 200,
          ),
        );
      },
    );
  }
}

Это результат, который появляется на кране:

Result

Почему это охватить весь экран?

1 Ответ

3 голосов
/ 15 марта 2020

bottomModal разрешается поднимать высоту представления, когда для isScrollControlled установлено значение "True" .. установка его на "False" меняет это.

Я создал этот дартпад, используя ваш код, но удалил класс виджета для метода сборки https://dartpad.dev/5850ec2b79564bb28f361eeed2b383ec

Если вы хотите отделить код для модального листа от вызывающей функции, вы должны использовать переменную, а не новый класс .

Вот код, содержащийся в файле дартпада выше: 

class MyFloatingActionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        showModalBottomSheet(
          shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
          isScrollControlled: false,
          isDismissible: true,
          backgroundColor: Colors.white,
          context: context,

          builder: (context) => DraggableScrollableSheet(
            initialChildSize: 0.4,
            minChildSize: 0.2,
            maxChildSize: 0.6,
            builder: (context, scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: Container(
                  color: Colors.blue,
                  height: 300,
                  width: 200,
                ),
              );
            },
          ),
        );
      },
    );
  }
}
...