图解自定义 Dialog 对话框
作者:chasel
- 2024-07-27 浙江
本文字数:2014 字
阅读完需:约 7 分钟
import 'package:flutter/material.dart';
class GenderChooseDialog extends Dialog {
GenderChooseDialog({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Padding(
padding: const EdgeInsets.all(12.0),
child: new Material(
type: MaterialType.transparency,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
decoration: ShapeDecoration(
color: Color(0xFFFFFFFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
))),
margin: const EdgeInsets.all(12.0),
child: new Column(children: <Widget>[
new Padding(
padding: const EdgeInsets.fromLTRB(
10.0, 40.0, 10.0, 28.0),
child: Center(
child: new Text('请选择性别',
style: new TextStyle(
fontSize: 20.0,
)))),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_genderChooseItemWid(1),
_genderChooseItemWid(2)
])
]))
])));
}
Widget _genderChooseItemWid(var gender) {
return GestureDetector(
child: Column(children: <Widget>[
Image.asset(
gender == 1
? 'images/icon_type_boy.png'
: 'images/icon_type_girl.png',
width: 135.0,
height: 135.0),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 22.0, 0.0, 40.0),
child: Text(gender == 1 ? '我是男生' : '我是女生',
style: TextStyle(
color: Color(gender == 1 ? 0xff4285f4 : 0xffff4444),
fontSize: 15.0)))
]));
}
}
复制代码
class GenderChooseDialog extends Dialog {
var title;
Function onBoyChooseEvent;
Function onGirlChooseEvent;
GenderChooseDialog({
Key key,
@required this.title,
@required this.onBoyChooseEvent,
@required this.onGirlChooseEvent,
}) : super(key: key);
Widget _genderChooseItemWid(var gender) {
return GestureDetector(
onTap: gender == 1 ? this.onBoyChooseEvent : this.onGirlChooseEvent,
child: Column(children: <Widget>[
Image.asset(
gender == 1 ? 'images/icon_type_boy.png'
: 'images/icon_type_girl.png',
width: 135.0, height: 135.0),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 22.0, 0.0, 40.0),
child: Text(gender == 1 ? '我是男生' : '我是女生',
style: TextStyle(
color: Color(gender == 1 ? 0xff4285f4 : 0xffff4444),
fontSize: 15.0)))
]));
}
}
// 方法调用
void _onItemPressed() {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return GenderChooseDialog(
title: '小哥哥小姐姐请选择',
onBoyChooseEvent: () {
Navigator.pop(context);
},
onGirlChooseEvent: () {
Navigator.pop(context);
});
});
}
复制代码
5. 注意事项
Dialog 也是 Widget 默认是占满全屏,所以小菜自己绘制部分对话框,为了协调,借助 type: MaterialType.transparency 设置了对话框外半透明效果;
无论是传参还是设置点击事件,都需要在初始化中添加,很像 Android 中对 RecycleView 设置内容和点击事件等;
划线
评论
复制
发布于: 刚刚阅读数: 5
chasel
关注
还未添加个人签名 2018-03-20 加入
还未添加个人简介
评论