【Flutter】ActionSheet, Alert, Dialog

ActionSheet 从底部弹出的抽屉

image

RaisedButton(
  child: Text('点击'),
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          color: Colors.red,
          height: 100,
        );
      }
    );
  },
),

做成常见的列表形式

RaisedButton(
  child: Text('点击'),
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Column(
          mainAxisSize: MainAxisSize.min, // 设置最小的弹出
          children: [
            new ListTile(
              leading: new Icon(Icons.photo_camera),
              title: new Text("Camera"),
              onTap: () async {

              },
            ),
            new ListTile(
              leading: new Icon(Icons.photo_library),
              title: new Text("Gallery"),
              onTap: () async {
                
              },
            ),
          ],
        );
      }
    );
  },
)

image

Alert 弹框

Flutter 提供 showDialog 函数生成一个带蒙层的弹层，然后使用 AlertDialog 组件写弹框。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: new Text('你确定要这样做吗?'),
      actions: [
        new FlatButton(
          child: new Text('取消'),
          onPressed: () {
            Navigator.of(context).pop();
            print('取消');
          },
        ),
        new FlatButton(
          child: new Text('确定'),
          onPressed: () {
            Navigator.of(context).pop();
            print('确定');
          },
        )
      ],
    );
  }
);

image

SimpleDialog

SimpleDialog 是一个用于向用户传递确定信息并提供选项的弹出层。

RaisedButton(
  child: Text('点击'),
  color: Colors.red,
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return new SimpleDialog(
          title: new Text('选择'),
          children: [
            new SimpleDialogOption(
              child: new Text('选项 1'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            new SimpleDialogOption(
              child: new Text('选项 2'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            new SimpleDialogOption(
              child: new Text('选项 3'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        );
      }
    );
  },
)

image.png

Toast

image.png

pubspec.yaml 中添加

dependencies:
  toast: ^0.1.3

执行

flutter packages get

RaisedButton(
  child: Text('点击'),
  onPressed: () {
    Toast.show('这是一个 toast', context);
  },
)