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

最新推荐文章于 2024-06-21 15:35:51 发布

原创

最新推荐文章于 2024-06-21 15:35:51 发布 · 500 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器

本文介绍了在Flutter中如何处理TextField组件在显示时被键盘遮挡的问题，通过设置`isScrollControlled`属性实现弹性高度，并利用MediaQuery获取键盘高度避免遮挡。同时展示了如何添加圆角样式以及在ModalBottomSheet中应用这些技巧。

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(