Flutter振——BottomSheet 类

在Flutter中，BottomSheet类是一个可以从应用程序的底部弹出的Material Design面板。BottomSheet类可以是持久性（保持在屏幕上直到用户手动将其关闭）或模态（阻止用户与底层应用程序交互，直到它被关闭）。BottomSheet类提供了一个内置的动画效果，可以将底部面板滑入或滑出屏幕。

创建BottomSheet

要创建一个BottomSheet，在build方法中使用showModalBottomSheet方法。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: // BottomSheet内容
    );
  },
);

其中builder方法返回的Widget即为BottomSheet中的内容。BottomSheet的内容可以使用任何Widget，如Text、Scaffold、ListView等。下面是一个简单的例子，其中bottomSheet内容为一个ListView。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  },
);

自定义BottomSheet

可以使用BottomSheet类自定义自己的BottomSheet。下面是一个例子，其中自定义的BottomSheet包含一个AppBar、一个TabBar和一个TabBarView。

class MyBottomSheet extends StatefulWidget {
  @override
  _MyBottomSheetState createState() => _MyBottomSheetState();
}

class _MyBottomSheetState extends State<MyBottomSheet> {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 350,
      child: Column(
        children: [
          AppBar(
            title: Text('My Bottom Sheet'),
          ),
          TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                Center(child: Text('Tab 1')),
                Center(child: Text('Tab 2')),
                Center(child: Text('Tab 3')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

使用自定义的BottomSheet的方法与使用系统提供的BottomSheet相同。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return MyBottomSheet();
  },
);

设置BottomSheet高度

可以使用Container来设置BottomSheet的高度。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: // BottomSheet内容
    );
  },
);

设置BottomSheet形状

默认情况下，BottomSheet是矩形。可以使用ClipRRect使BottomSheet变成圆角矩形。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Container(
        child: // BottomSheet内容
      ),
    );
  },
);

设置BottomSheet的背景颜色和半透明度

可以使用Container来设置BottomSheet的背景颜色和半透明度。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white.withOpacity(0.7),
      child: // BottomSheet内容
    );
  },
);

隐藏BottomSheet时执行的动作

可以使用await关键字获取用户从BottomSheet返回的值并执行相应的操作。

final result = await showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: // BottomSheet内容
    );
  },
);

if (result != null) {
  // 执行相应操作
}

改变BottomSheet的动画效果

可以使用BottomSheet的animationController属性来改变动画效果。

showModalBottomSheet(
  context: context,
  animationController: AnimationController(
    duration: Duration(seconds: 1),
    vsync: this,
  ),
  builder: (BuildContext context) {
    return Container(
      child: // BottomSheet内容
    );
  },
);

总结

BottomSheet是一个非常有用的小部件，可以在应用程序的底部展示重要的信息，例如设置选项、筛选条件等。BottomSheet还可以被用作微交互的工具，例如分享操作、反馈获取等。BottomSheet类具有很好的灵活性，因此可以非常方便地自定义样式和动画。