Flutter入门与实战（十一）：底部弹窗ModalBottomSheet详解

2023-10-02 20:42:04

在Flutter中，ModalBottomSheet是一个非常有用的控件，它可以帮助我们在应用中创建底部弹窗。ModalBottomSheet可以用来显示各种信息，例如列表、表单和地图。它还可以用来提供用户交互功能，例如选择日期或时间。

在本篇教程中，我们将学习如何使用ModalBottomSheet来创建底部弹窗。我们将介绍三种创建ModalBottomSheet的方法：

使用showModalBottomSheet()方法
使用showBottomSheet()方法
使用builder方法

使用showModalBottomSheet()方法

showModalBottomSheet()方法是创建ModalBottomSheet最简单的方法。它只需要一个参数：要显示的widget。

showModalBottomSheet(context: context, builder: (context) {
  return Container(
    height: 200,
    color: Colors.white,
    child: Center(
      child: Text('This is a ModalBottomSheet'),
    ),
  );
});

上面的代码创建一个高度为200像素、背景颜色为白色的ModalBottomSheet。它在ModalBottomSheet的中心显示一个文本小部件，其中包含文本“This is a ModalBottomSheet”。

使用showBottomSheet()方法

showBottomSheet()方法与showModalBottomSheet()方法非常相似。唯一的区别是，showBottomSheet()方法允许您指定ModalBottomSheet的语义。

showBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a ModalBottomSheet'),
      ),
    ),
  ),
  semanticsLabel: 'This is a ModalBottomSheet',
);

上面的代码创建一个语义标签为“This is a ModalBottomSheet”的ModalBottomSheet。这意味着屏幕阅读器将把ModalBottomSheet读作“This is a ModalBottomSheet”。

使用builder方法

builder方法是创建ModalBottomSheet最灵活的方法。它允许您完全控制ModalBottomSheet的外观和行为。

showModalBottomSheet(
  context: context,
  builder: (context) {
    return StatefulBuilder(
      builder: (context, setState) {
        return Container(
          height: 200,
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Text('This is a ModalBottomSheet'),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    // 更新ModalBottomSheet的状态
                  });
                },
                child: Text('Update'),
              ),
            ],
          ),
        );
      },
    );
  },
);