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: <Widget>[
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: <Widget>[
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: <Widget>[
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);
},
)
