写点什么

图解自定义 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. 注意事项

  1. Dialog 也是 Widget 默认是占满全屏,所以小菜自己绘制部分对话框,为了协调,借助 type: MaterialType.transparency 设置了对话框外半透明效果;

  2. 无论是传参还是设置点击事件,都需要在初始化中添加,很像 Android 中对 RecycleView 设置内容和点击事件等;

用户头像

chasel

关注

还未添加个人签名 2018-03-20 加入

还未添加个人简介

评论

发布
暂无评论
图解自定义 Dialog 对话框_chasel_InfoQ写作社区