一、iOS风格弹窗
风格一：
void showCupertinoAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text("这是一个iOS风格的对话框"),
content: Column(
children: <Widget>[
SizedBox(
height: 10,
),
Align(
child: Text("这是消息"),
alignment: Alignment(0, 0),
),
Align(
child: Text("贼哈哈哈哈"),
alignment: Alignment(0, 0),
),
],
),
actions: <Widget>[
CupertinoDialogAction(
child: Text("取消"),
onPressed: () {
Navigator.pop(context);
print("取消");
},
),
CupertinoDialogAction(
child: Text("确定"),
onPressed: () {
Navigator.pop(context);
print("确定");
},
),
],
);
});
}
image.png
风格二：
void showCupertinoAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text("这是一个iOS风格的对话框"),
actions: <Widget>[
CupertinoDialogAction(
child: Text('非常好'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('一般'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('非常差'),
// isDestructiveAction: false,
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
});
}
image.png
风格三：
void showAlertDialog(BuildContext context){
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Dialog'),
content: Text(('Dialog content..')),
actions: <Widget>[
Container(
height: 40,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(10),
),
child: TextButton(
child: Text("取 消"),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Container(
height: 40,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(10),
),
child: TextButton(
child: Text("确 定"),
onPressed: () {
Navigator.of(context).pop();
},
),
),
],
));
}
image.png
风格四：底部
// Future<int> _showBasicModalBottomSheet(context, List<String> options) async {
void _showBasicModalBottomSheet(context, List<String> options) {
showModalBottomSheet<int>(
isScrollControlled: false,
context: context,
builder: (BuildContext context) {
return Container(
height: 300,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage('https://img0.baidu.com/it/u=2663888674,2564213533&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500'),
),
trailing: Icon(Icons.keyboard_arrow_right),
title: Text(options[index]),
subtitle: Text('美女'),
onTap: () {
Navigator.of(context).pop(index);
});
},
itemCount: options.length,
),
);
},
);
}
image.png
二、GetX的Dialog风格
1、自定义的
onTap: () => Get.defaultDialog(),
image.png
2、手动定义
onTap: () => Get.dialog(const RedJoinPopup()),
class RedJoinPopup extends StatelessWidget {
const RedJoinPopup({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final ctrl = Get.put(DialogExample());
return Scaffold(
backgroundColor: Colors.transparent,
// backgroundColor : Colors.white,
body: Stack(
children: [
// Center(
// child: Container(
// decoration: BoxDecoration(
// image: DecorationImage(
// fit: BoxFit.cover,
// image: new NetworkImage(
// 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F45%2Ffa%2Fb7%2F45fab71282dae578be117d2cb4e76eb1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661595959&t=5ae2dc20fdb9eb191eb0b06f6ea509cb'),
// ),
// ),
// width: 300,
// height: 600,
// child: Column(
// children: [
// const Text('datar112'),
// const Text('data23'),
// const Text('data1'),
// const Text('data12'),
// ],
// ),
// )
// ),
Positioned(
top: 80,
right: 50,
width: 300,
height: 600,
child: Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
const Text('datar112'),
const Text('data23'),
const Text('data1'),
const Text('data12'),
],
),
),
),
Positioned(
top: 15,
right: 50,
child: IconButton(
onPressed: () {
Get.back();
Get.toNamed(Routes.nextController,parameters: {'name':'zhang'});
},
icon: Icon(
Icons.cancel_outlined,
size: 28,
),
color: Colors.white,
),
)
],
),
);
}
}
image.png
3、设置背景图片
class DialogExample extends StatelessWidget {
// DialogExample pageController = DialogExample();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Title"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F45%2Ffa%2Fb7%2F45fab71282dae578be117d2cb4e76eb1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661595959&t=5ae2dc20fdb9eb191eb0b06f6ea509cb'),
),
),
child: Column(
children: [
ElevatedButton(
onPressed: () {
Get.dialog(RedJoinPopup(),useSafeArea: true);
},
child: Text("显示 Dialog"))
],
),
),
)
],
),
),
);
}
}
image.png
