如何使用带有颤动的关闭图标设计“自定义”对话框？
我有对话框的图像，并尝试设计与图像下方相同的图像。
我尝试过，但与图片上方不一样
我只想在图像的右上角设置十字按钮。
我使用了Stack，并在Positioned，top:0.0处放置了right:0.0小部件。
代码：
customDialogBox(BuildContext context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(
height: 20.0,
width: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
),
],
),
),
Positioned(
top: 0.0,
right: 0.0,
child: FloatingActionButton(
child: Image.asset("assets/red_cross.png"),
onPressed: (){
Navigator.pop(context);
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80)),
backgroundColor: Colors.white,
mini: true,
elevation: 5.0,
),
),
],
)
);
});
}
这是我的对话框：
2 个答案:
答案 0 :(得分：4)
尝试一下，效果会很好。
import 'package:flutter/material.dart';
import 'custom_dialog.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: RaisedButton(
onPressed: () {
showDialog(context: context, builder: (BuildContext context) => CustomDialog());
},
child: Text('show custom dialog'),
),
),
);
}
}
对话框小部件：
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(context),
);
}
Widget dialogContent(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 0.0,right: 0.0),
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 18.0,
),
margin: EdgeInsets.only(top: 13.0,right: 8.0),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16.0),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black26,
blurRadius: 0.0,
offset: Offset(0.0, 0.0),
),
]),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(height: 24.0),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0,bottom:15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(16.0),
bottomRight: Radius.circular(16.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
)
],
),
),
Positioned(
right: 0.0,
child: GestureDetector(
onTap: (){
Navigator.of(context).pop();
},
child: Align(
alignment: Alignment.topRight,
child: CircleAvatar(
radius: 14.0,
backgroundColor: Colors.white,
child: Icon(Icons.close, color: Colors.red),
),
),
),
),
],
),
);
}
}
方法2：
void showFancyCustomDialog(BuildContext context) {
Dialog fancyDialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
height: 300.0,
width: 300.0,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12.0),
),
),
Container(
width: double.infinity,
height: 50,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Align(
alignment: Alignment.center,
child: Text(
"Dialog Title!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
),
),
child: Align(
alignment: Alignment.center,
child: Text(
"Okay let's go!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
),
),
),
Align(
// These values are based on trial & error method
alignment: Alignment(1.05, -1.05),
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.close,
color: Colors.black,
),
),
),
),
],
),
),
);
showDialog(
context: context, builder: (BuildContext context) => fancyDialog);
}
答案 1 :(得分：1)
为了构建自定义对话框，我必须自定义所有内容。
我仍然使用堆栈，但没有使用内置的DialogBox，而是使用Container，而是将图标的图像替换为实际的图标，并按照预期的结果将其设置为粗体。 >
希望这符合您的需求。
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(30.0),
),
width: 500.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(
height: 20.0,
width: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
),
],
),
),
Align(
alignment: Alignment(1.05, -0.35),
child: InkWell(
onTap: () {},
child: Container(
width: 40.0,
height: 40.0,
child: Icon(Icons.close, color: Colors.red, size: 40,),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black,offset: Offset(0, 1), blurRadius: 2),
],
shape: BoxShape.circle,
color: Colors.white
),
),
),
),
],
),
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？