颤动中带有圆角的警报对话框
Posted
技术标签:
【中文标题】颤动中带有圆角的警报对话框【英文标题】：Alert Dialog with Rounded corners in flutter 【发布时间】：2018-11-30 12:57:49 【问题描述】：我正在尝试在 Flutter 中创建一个带有圆角的警报对话框，如下图所示。还在这里添加我的代码，但我的输出与预期的完全不同。任何人，请帮助我。
预期的警报对话框
我的代码在这里。
void _showAlert()
AlertDialog dialog = new AlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0, top: 10.0, bottom: 10.0, right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
showDialog(context: context, child: dialog);
我从上面的代码得到的输出是。
【问题讨论】：
【参考方案1】：你可以简单地使用 AlertDialog 的 shape 属性
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)))
【讨论】：
【参考方案2】：你可以这样使用
使用get: ------------->
Get.generalDialog(
pageBuilder: (BuildContext buildContext, Animation animation,
Animation secondaryAnimation) =>
AlertDialog(
contentPadding: EdgeInsets.zero,
// this padding user for outside of alert padding
insetPadding: EdgeInsets.symmetric(horizontal: 10),
content: Container(
height: Get.height - 300, // Change as per your requirement
width: Get.width, // Change as per your requirement
child: <Your Widget>
),
),
));
使用警告对话框：------>
CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: <Your widget>
),
);
);
【讨论】：
【参考方案3】：AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(
Icons.highlight_off_outlined, color: Color(0xff5A5D60),),
onPressed: ()
Navigator.of(context,
rootNavigator: true)
.pop();
),
SizedBox(
width: 10,
)
],
),
Image(
image: AssetImage(
'assets/warningicon.png'),
),
SizedBox(
height: mdq.height * .01,
),
Text(
'Registered Successfully',
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
fontWeight: FontWeight.bold),
),
Text(
'Your account has been Successfully\ncreated.',
textAlign: TextAlign.center,
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
),
),
SizedBox(
height: mdq.height * .04,
),
Row(
//mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
InkWell(
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Login1()));
,
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffEEEEEE),
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(12.0),
//bottomRight: Radius.circular(32.0)
),
),
width: 150,
child: Text(
"No",
style: TextStyle(
color: Color(0xff5A5D60),
fontSize: 17),
textAlign: TextAlign.center,
),
),
),
InkWell(
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Testing()));
,
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffFFDC00),
borderRadius: BorderRadius.only(
//bottomLeft: Radius.circular(32.0),
bottomRight:
Radius.circular(12.0)),
),
child: Text(
"Yes",
style: TextStyle(
color: Colors.white,
fontSize: 17),
textAlign: TextAlign.center,
),
width: 150,
),
),
],
),
],
),
),
),[You can also show and design dialog box like this**strong text**][1]
【讨论】：
【参考方案4】：要更改对话框形状的外观，您可以将 AlertDialog 的 shape 属性设置为所需的形状。
AlertDialog 默认形状是半径为 4.0 的 RoundedRectangleBorder
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
)
【讨论】：
【参考方案5】：如果您想使用标准对话框，您只需将装饰应用到与您的对话框设置匹配的容器
showDialog(
context: context,
child: Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
),
child: Text('foobar'),
)
],
),
),
);
【讨论】：
【参考方案6】：试试这个代码
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
title: Text('title'),
content: Text('content'),
);
,
);
【讨论】：
【参考方案7】：您设置 BoxDecoration 的容器位于警报对话框下的小部件树中。这意味着您只是在对话框的填充内设置了一个框。您需要创建一个自定义 AlertDialog/showDialog 并在那里设置半径。在自定义小部件中，您还可以添加按钮以及您需要在该填充之外工作的所有内容。
当您在项目 (gist.github.com) 中包含 customShowDialog.dart 文件时，您可以在此处编辑半径 borderRadius: BorderRadius.all(Radius.circular(20.0)) 并像这样调用它：
return new CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0,
top: 10.0,
bottom: 10.0,
right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
);
你会得到这样的东西：
编辑：
尽管 Flutter 最近推出了 shape property，它可以通过设置 ShapeBorder 来帮助您处理圆角，例如
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
您仍然需要为某些自定义快速添加自定义小部件，例如自定义填充，如上所述。
【讨论】：
你的班级customAlertDialog 应该是初始上限。【参考方案8】：
添加
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
title: Text("Loading..."),
content: CircularProgressIndicator(),
);
,
);
【讨论】：
【参考方案9】：我正在查看这些答案，但没有一个能帮助我获得想要的外观。
我注意到有一个默认填充，所以我所做的只是：
AlertDialog(
titlePadding: EdgeInsets.all(0),
title: Container(
height: 30.00,
width: 300.00,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(topLeft: Radius.circular(32), topRight: Radius.circular(32)),
),
),
)
我覆盖了titlePadding 属性，它恰到好处。如果您发现任何问题，还有一个contentPadding 属性。我从我的一个应用程序中复制了这个只是为了显示属性，但它也适用于这种情况。
【讨论】：
【参考方案10】：试试这个代码：
AlertDialog(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(15))),
title: Text('Your title!'),
content: Container(),
);
【讨论】：
【参考方案11】：虽然我迟到了解决方案，但这可能有助于其他人搜索它。以下代码 sn-ps 详细说明了它是如何实现的。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Rounde Alert Box",
home: Scaffold(
appBar: AppBar(
backgroundColor: myColor,
title: Text("Rounded Alert Box"),
),
body: RoundedAlertBox(),
),
);
class RoundedAlertBox extends StatefulWidget
@override
_RoundedAlertBoxState createState() => _RoundedAlertBoxState();
class _RoundedAlertBoxState extends State<RoundedAlertBox>
@override
Widget build(BuildContext context)
return Center(
child: RaisedButton(
onPressed: openAlertBox,
color: myColor,
child: Text(
"Open Alert Box",
style: TextStyle(color: Colors.white),
),
),
);
openAlertBox()
return showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Rate",
style: TextStyle(fontSize: 24.0),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
],
),
],
),
SizedBox(
height: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
Padding(
padding: EdgeInsets.only(left: 30.0, right: 30.0),
child: TextField(
decoration: InputDecoration(
hintText: "Add Review",
border: InputBorder.none,
),
maxLines: 8,
),
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: myColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"Rate Product",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
);
代码 sn-p 的输出如下所示：
【讨论】：
非常感谢 :)【参考方案12】：这对我有用：
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
【讨论】：
以上是关于颤动中带有圆角的警报对话框的主要内容，如果未能解决你的问题，请参考以下文章