如图:
项目需求需要实现以上效果
思路解析:
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