showModalBottomSheet+TextField被遮挡（加圆角及改变最大高度）

最新推荐文章于 2024-09-28 16:58:39 发布

小蜜蜂嗡嗡

最新推荐文章于 2024-09-28 16:58:39 发布

阅读量430

点赞数

文章标签：编辑器

本文链接：https://blog.csdn.net/androidhyf/article/details/121244758

版权

1.修改最大高度：isScrollControlled: true,使用这个属性将高度改为弹性高度
加圆角：

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
      ),

2.使用TextField组件时被键盘遮挡问题
1添加：isScrollControlled: true,
2 被包裹的布局容器不能设置高度
3布局：两种方式；（isScrollControlled 及布局组件的padding属性设置很重要）

padding: EdgeInsets.only(left: ScreenUtil().setWidth(36),
right: ScreenUtil().setWidth(36),
top: ScreenUtil().setHeight(26),
bottom: MediaQuery.of(context).viewInsets.bottom),//这里的MediaQuery.of(context).viewInsets参数必须设置，否则键盘弹出时无法得相应的高度会抬不起来

第一种

//第二种方式代码是全部代码这里就不全写了，内部的布局跟第二种一样，都是自己随便写的，
AnimatedPadding(
      padding: MediaQuery.of(context).viewInsets,
      duration: const Duration(milliseconds: 100),
      child: 这里包裹你的布局

或者用SingleChildScrollView包裹（如下实例）

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
      ),
      builder: (BuildContext context) {
        return SingleChildScrollView(
          child: Container(
            //height: ScreenUtil().setHeight(280),//布局容器不能设置高度
            width: getWidth(context),
            padding: EdgeInsets.only(left: ScreenUtil().setWidth(36),right: ScreenUtil().setWidth(36),top: ScreenUtil().setHeight(26),bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(15)),
                  child: WTextView(title,style: getTextStyle(fontSize: ScreenUtil().setSp(30),fontWeight: FontWeight.bold),),
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    WTextView('操作时间',style: getTextStyle(fontSize: ScreenUtil().setSp(28),),),
                    Expanded(child: WTextView('请选择时间',style: getTextStyle(fontSize: ScreenUtil().setSp(28),color: Colors.black26),maxLines: 1,textAlign: TextAlign.end,),flex: 1,),
                    Icon(Icons.arrow_forward_ios_rounded,size: 14,color: Colors.black26)
                  ],
                ),

                Container(
                  height: ScreenUtil().setHeight(1),
                  color: Colors.black12,
                  margin: EdgeInsets.only(top: ScreenUtil().setHeight(10),bottom: ScreenUtil().setHeight(10)),
                ),

                Row(
                  children: [
                    WTextView('物流信息',style: getTextStyle(fontSize: ScreenUtil().setSp(28),),),
                    Expanded(child: Container(
                      alignment: Alignment.centerRight,
                      height: ScreenUtil().setHeight(64),
                      child: EditText(//EditText是自己封装的TextField
                        controller: _exportEditController,
                        textInputAction: TextInputAction.next,
                        textInputType: TextInputType.text,
                        // focusNode: _reasonFocusNode,
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        contentPadding: EdgeInsets.zero,
                        isDense: true,
                        textAlign: TextAlign.end,
                        inputFormatters: [
                          //onlydigits==null?setMaxLength(100):onlydigits?getNumber():setMaxLength(100)
                        ],
                        maxLength: 100,
                        fontSize: ScreenUtil().setSp(28),
                        onEditingComplete: (){
                          closeInput(context);
                        },
                        hintText: '请输入流转信息',
                        hintColor: Colors.black26,
                        //hintColor: ColorUtil.hexColor(0xffD6D6D6),
                        maxLines: 10,
                      ),
                    ),flex: 1,),
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: ScreenUtil().setHeight(30)),
                  height: ScreenUtil().setHeight(54),
                  width: getWidth(context)-ScreenUtil().setWidth(100),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(30)
                  ),child: WTextView('确定',style: getTextStyle(color: Colors.white,fontSize: ScreenUtil().setSp(28)),),
                )
              ],
            ),

          ),
        );
      },
    )