flutter--TextField使用问题

调用代码:

 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;
  }
}

效果差不多就这样

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值