Flutter振——BottomSheet 类

BottomSheet 类是 Flutter 提供的一种实现 IOS 底部弹出面板的技术方案。本文将为你介绍 BottomSheet 类的各种用法。

创建 BottomSheet

要创建一个 BottomSheet，首先需要使用 showModalBottomSheet 方法。 showModalBottomSheet 方法有两个必要的参数，一个是 BuildContext 上下文对象，另一个是 builder 回调函数。builder 回调函数会包含一个 BuildContext 上下文对象和 SheetController 对象。

showModalBottomSheet(
  context: context,
  builder: (BuildContext bc) {
    return Container(
      child: Wrap(
        children: <Widget>[
          ListTile(
              leading: Icon(Icons.music_note),
              title: Text('Music'),
              onTap: () => {}
          ),
          ListTile(
            leading: Icon(Icons.videocam),
            title: Text('Video'),
            onTap: () => {},
          ),
        ],
      ),
    );
  }
);

控制 BottomSheet

BottomSheet 可以通过 SheetController 控制。SheetController 提供了两个方法： close 和 hide。close 方法可以使 BottomSheet 在关闭时执行回调，hide 方法可以把 BottomSheet 隐藏起来。

var sheetController = showModalBottomSheet(
  context: context,
  builder: (BuildContext bc) {
    return Container(
      child: Wrap(
        children: <Widget>[
          ListTile(
              leading: Icon(Icons.music_note),
              title: Text('Music'),
              onTap: () => {}
          ),
          ListTile(
            leading: Icon(Icons.videocam),
            title: Text('Video'),
            onTap: () => {},
          ),
        ],
      ),
    );
  }
);

sheetController.close();

自定义 BottomSheet

Flutter 提供了一些简单的 BottomSheet，但是如果需要更复杂的功能或自定义布局，我们可以使用自定义 BottomSheet。

_showBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) {
      return Container(
        child: new Wrap(
          children: <Widget>[
            new ListTile(
              leading: new Icon(Icons.music_note),
              title: new Text('Music'),
              onTap: () => {},
            ),
            new ListTile(
              leading: new Icon(Icons.videocam),
              title: new Text('Video'),
              onTap: () => {},
            ),
            new Container(
              padding: EdgeInsets.all(10.0),
              child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      'Custom BottomSheet',
                      style: new TextStyle(fontWeight: FontWeight.bold),
                    ),
                    new Padding(padding: EdgeInsets.only(top: 10.0)),
                    new TextField(
                      decoration:
                          new InputDecoration(hintText: 'Enter some text'),
                    )
                  ]),
            )
          ],
        ),
      );
    },
  );
}

总结

BottomSheet 是一种非常方便和实用的弹出面板。它可以通过控制器便捷地操作和定制。希望本文可以帮助大家更好地使用 BottomSheet。