100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > flutter 自定义微信/支付宝密码输入框

flutter 自定义微信/支付宝密码输入框

时间:2019-12-31 22:46:59

相关推荐

flutter 自定义微信/支付宝密码输入框

如图:

项目需求需要实现以上效果

思路解析:

1 可以用dialog来实现

2 可以用一个新statfulWidget实现

因为不大熟悉dialog,故用了一个新的statefulWidget来实现页面效果,直接上代码:

////// 功能:/// 描述:设置密码弹框功能/// crated by xudailong on /3/10.///class MineDestorySetPwdPage extends StatefulWidget {@override_MineDestorySetPwdPageState createState() => _MineDestorySetPwdPageState();}class _MineDestorySetPwdPageState extends State<MineDestorySetPwdPage> {String pwdData = '';final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();bool showError = false;@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.transparent, //把scaffold的背景色改成透明body: Container(color: MyColor.lightColor,width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,alignment: Alignment.bottomLeft,child: Column(children: <Widget>[Container(width: MediaQuery.of(context).size.width,height: 150,),Container(height: 180,width: 300,child: Column(children: <Widget>[GestureDetector(child: Container(alignment: Alignment.topRight,child: Image.asset(ImageUtil.getLocalPath(ImageConstant.icon_pass_close),width: 10,height: 10,),padding: EdgeInsets.only(right:MyDimen.baseRight,top: MyDimen.baseLeft ),),onTap: (){Navigator.of(context).pop();},behavior: HitTestBehavior.opaque,),Container(child: Text('请输入账户密码',style: TextStyle(fontSize: MyDimen.dp14,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w600),),),Container(height: 50,width: 250,margin: EdgeInsets.only(top: MyDimen.dp30),child: CustomJPasswordField(pwdData),),Container(padding: EdgeInsets.only(left: MyDimen.baseLeft,right: MyDimen.baseRight,top: MyDimen.dp20),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[showError?Text('您输入的密码有误',style: TextStyle(fontSize: MyDimen.dp12,color: MyColor.redNumFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w500),):Container(),GestureDetector(child: Text('忘记密码',style: TextStyle(fontSize: MyDimen.dp12,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w500),),onTap: (){RouteUtil.jump2AccountPwd(context);},behavior: HitTestBehavior.opaque,)],),),],),decoration: BoxDecoration(color: MyColor.bg_white,borderRadius: BorderRadius.all(Radius.circular(10))),),Expanded(flex: 1,child: Container(),),Align(child: Container(height: 200,width: MediaQuery.of(context).size.width,color: MyColor.bg_white,alignment: Alignment.bottomCenter,child: MyKeyboard(_onKeyDown),),alignment: Alignment.bottomCenter,)],),),);}

欢迎阅读:免费搭建个人博客:/xudailong_blog/article/details/78762262

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。