调用代码: HouseDialog( context: ctx.context, title: '关联房源ID', body: material.Container( child: material.Container( constraints: material.BoxConstraints( minHeight: 40, //限制编辑框的高度 maxHeight:40, ), child: material.TextField( controller: ctx.state.houseIdController, keyboardType: material.TextInputType.text, maxLines: 1, decoration: material.InputDecoration( filled: true, //背景颜色,必须结合filled: true,才有效 fillColor: Colors.blue,//重点,必须设置为true,fillColor才有效 counterText: "", border: material.OutlineInputBorder(//边框,一般下面的几个边框一起设置 borderRadius: material.BorderRadius.circular(4), borderSide: material.BorderSide( color: CommercialColors.color_e6e6e6, width: 0.5, style: material.BorderStyle.solid)), enabledBorder: material.OutlineInputBorder( borderRadius: material.BorderRadius.circular(4), borderSide: material.BorderSide( color: CommercialColors.color_e6e6e6, width: 0.5, ), ), focusedBorder: material.OutlineInputBorder( borderRadius: material.BorderRadius.circular(4), borderSide: material.BorderSide( color: CommercialColors.color_e6e6e6, width: 0.5, ), ), contentPadding: material.EdgeInsets.only(left: 10, right: 10)), cursorColor: CommercialColors.black_33, keyboardAppearance: material.Brightness.light, autofocus: false, style: material.TextStyle( color: CommercialColors.black_33, fontSize: 15), ), ), padding: material.EdgeInsets.only(bottom: 20, left: 25, right: 25), ), ).showCommonDialog(cancelText: '取消', confirmText: '确定').then((value) { // 业务逻辑 }); }
HouseDialog是对Dialog的封装:
class HouseDialog { final BuildContext context; final String title; final Widget body; final Widget headBar; Function checkBlock; bool withInput; //当底部bar上有输入框时置为true需要处理键盘遮挡输入框问题 HouseDialog( {@required this.context, this.title, this.body, this.headBar, this.checkBlock, this.withInput}); ///底部弹窗 Future<int> showBottomDialog({double height}) { return showModalBottomSheet<int>( context: context, isScrollControlled: true, backgroundColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(12), topRight: Radius.circular(12), ), ), builder: (BuildContext context) { return _createBottomSheetBody(height: height); }, ); } Widget _createBottomSheetBody({double height}) { return withInput == true ? AnimatedPadding( padding: MediaQuery.of(context).viewInsets, duration: Duration(milliseconds: 100), child: SafeArea( bottom: true, child: Container( // height: height, child: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ _buildHeader(), body, // height == null // ? body // : Expanded( // child: body, // ) ], ), ), ), ), ) : Container( height: height, child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ _buildHeader(), height == null ? body : Expanded( child: body, ) ], ), ); } ///普通弹窗 Future<int> showCommonDialog({String cancelText, String confirmText}) { return showDialog<int>( context: context, builder: (BuildContext context) { var child = Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(20, 12, 10, 18), child: Text( title, style: TextStyle( color: CommercialColors.black_33, fontSize: 15), ), ), body == null ? Container() : body, Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ cancelText?.isEmpty ?? true ? Container() : Expanded( child: GestureDetector( onTap: () { Navigator.of(context).pop(0); }, child: Container( decoration: BoxDecoration( border: Border( top: BorderSide( color: CommercialColors.color_dddddd, width: 0.5), right: BorderSide( color: CommercialColors.color_dddddd, width: 0.5))), padding: EdgeInsets.fromLTRB(0, 15, 0, 15), child: Text( cancelText, textAlign: TextAlign.center, style: TextStyle( color: CommercialColors.grey_66, fontSize: 15), ), )), ), confirmText?.isEmpty ?? true ? Container() : Expanded( child: GestureDetector( onTap: () { if (checkBlock != null) { //如果有回调,检测通过才关闭弹窗,否则不关闭 if (checkBlock()) { Navigator.of(context).pop(1); } } else { //默认情况下关闭弹窗 Navigator.of(context).pop(1); } }, child: Container( decoration: BoxDecoration( border: Border( top: BorderSide( color: CommercialColors.color_dddddd, width: 0.5))), padding: EdgeInsets.fromLTRB(0, 15, 0, 15), child: Text( confirmText, textAlign: TextAlign.center, style: TextStyle( color: CommercialColors.color_ff552e, fontSize: 15), ), ), )) ], ) ], ); return Dialog( child: child, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(12)))); }, ); } Widget _buildHeader() { return headBar == null ? Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Expanded( child: Padding( padding: EdgeInsets.fromLTRB(20, 16, 10, 16), child: Text( title, overflow: TextOverflow.ellipsis, style: TextStyle( color: CommercialColors.black_33, fontSize: 15, fontWeight: FontWeight.bold), ), ), ), GestureDetector( onTap: () => Navigator.of(context).pop(), child: Container( height: 46, color: Colors.transparent, padding: EdgeInsets.fromLTRB(20, 0, 20, 0), child: Image.asset( 'assets/images/dialog_close_icon.png', width: 26, height: 26, fit: BoxFit.contain, ), ), ) ], ) : headBar; } }
效果差不多就这样