Question

我正在使用showModalBottomSheet小部件，我想更改大小，使其占据屏幕的大约75％（默认情况下，它似乎占据了50％）。我试图按照文档进行操作，但是找不到size属性。有人可以建议我更改此小部件大小的方法吗？

Answer 1

容器或SizedBox中的MediaQuery
列或行小部件中的灵活，扩展的小部件
包装，小数部分化的Box小部件

选择其中一项对您的体系结构更好

       showModalBottomSheet(
          context: context,
          builder: (BuildContext builder) {
            return Container(
              height: MediaQuery.of(context).copyWith().size.height * 0.75,
              child: CupertinoDatePicker(
                initialDateTime: appointmentDate,
                onDateTimeChanged: (DateTime newDate) {
                  if (this.mounted) setState(() => appointmentDate = newDate);
                },
                use24hFormat: true,
                mode: CupertinoDatePickerMode.date,
                isScrollControlled: true,
              ),
            );
          },
        );

Answer 2

您必须将参数 isScrollControlled 设置为true

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    /* your code */
  }
);

Answer 3

要占据75％的屏幕，

showModalBottomSheet(
          context: context,
          builder: (BuildContext builder) {
            return Container(
              height: MediaQuery.of(context).copyWith().size.height* (3/4),
              child: CupertinoDatePicker(
                initialDateTime: appointmentDate,
                onDateTimeChanged: (DateTime newDate) {
                  if (this.mounted) setState(() => appointmentDate = newDate);
                },
                use24hFormat: true,
                mode: CupertinoDatePickerMode.date,
              ),
            );
          },
        );

Answer 4

使用Wrap widget来包装布局子级，则不必设置高度。

showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (BuildContext builder) {
            return  Container(
            child: Wrap(
              children: <Widget>[

              ],
            ),
          );
          },
        );

如何更改showModalBottomSheet的大小？ [扑]

4 个答案: