我是 Flutter 的新手，正在尝试自定义材料飞镖的AlertDialog小部件。
有办法为整个对话框设置背景色，有没有办法只为对话框的某些部分设置背景色，从附图看，对话框动作部分的背景色应该是不同的。
问问题
163 次
4 回答
2
试试下面的代码希望它对你有帮助。
您要调用 alrtDialog 的小部件
TextButton(
onPressed: () {
showDataAlert();
},
child: Text(
'Pressed',
),
),
您的警报对话框功能
showDataAlert() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(
20.0,
),
),
),
contentPadding: EdgeInsets.only(
top: 10.0,
),
title: Text(
"Your Title Here",
style: TextStyle(fontSize: 24.0),
),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Your Contents Here",
style: TextStyle(fontSize: 24.0),
),
SizedBox(
height: 5.0,
),
Container(
decoration: BoxDecoration(
color: Colors.grey.shade500,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0)),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
primary: Colors.white,
),
child: Text(
"Cancel",
style: TextStyle(
color: Colors.black,
),
),
),
SizedBox(
width: 10,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
primary: Colors.black,
),
child: Text(
"Confirm",
),
),
],
),
)),
],
),
),
);
});
}
您的结果屏幕->
于 2021-11-17T10:48:21.110 回答
1
AlertDialog具有将应用于整个背景的backgroundColor参数和参数。Color
title,actions需要小部件可以按照您想要的方式进行配置。
AlertDialog(
backgroundColor: Colors.pink,
content: Text("Message"),
buttonPadding: EdgeInsets.all(13),
actions: [
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
child: Text("Cancel"),
),
ElevatedButton(
onPressed: () {},
child: Text("Confirm"),
),
],
);
我ElevatedButton用作操作按钮，您可以选择任何内容并对其进行配置。虽然一切都是小部件，但您可以按照自己的方式放置。您还可以覆盖主题数据。
更多关于
于 2021-11-17T09:44:05.790 回答
0
您可以创建自定义对话框。
像这样。
Dialog errorDialog = Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), //this right here
child: Container(
height: 200.0,
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: Text('Cool', style: TextStyle(color: Colors.red),),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Text('Awesome', style: TextStyle(color: Colors.red),),
),
Padding(padding: EdgeInsets.only(top: 50.0)),
TextButton(onPressed: () {
Navigator.of(context).pop();
},
child: Text('Done!', style: TextStyle(color: Colors.purple, fontSize: 18.0),))
],
),
),
);
并显示对话框
showDialog(context: context, builder: (BuildContext context) => errorDialog);}
于 2021-11-17T08:41:59.127 回答
0
https://i.stack.imgur.com/Mz3YL.png
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
//this right here
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
children: [
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Cool',
style: TextStyle(color: Colors.red),
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Awesome',
style: TextStyle(color: Colors.red),
),
),
Padding(padding: EdgeInsets.only(top: 50.0)),
],
),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12))
),
width: double.maxFinite,
child: TextButton(
onPressed: () {},
child: Text(
'Done!',
style: TextStyle(color: Colors.purple, fontSize: 18.0),
)),
)
],
),
); ```
[1]: https://i.stack.imgur.com/Mz3YL.png
于 2021-11-17T09:15:31.420 回答