`
iaiai
  • 浏览: 2145092 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flutter - showModalBottomSheet 自定义高度 和 TextField 输入框,键盘弹出的bug

阅读更多
如何自定义 showModalBottomSheet 的高度

设置属性 isScrollControlled 为 true,此时 showModalBottomSheet 是全屏

在builder 中返回带高度的 SizedBox 即可自定义高度
showModalBottomSheet(
  isScrollControlled:true,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (BuildContext context) {
  
    double height = 240;
    return SizedBox(
      child: content,
      height: height,
    );
  }
);


showModalBottomSheet 中有输入框,键盘弹出内容被遮挡的问题

在builder 中返回的组件用 AnimatedPadding 包裹即可。
showModalBottomSheet(
  isScrollControlled:true,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (BuildContext context) {
  
    double height = 240;
    return AnimatedPadding(
      padding: MediaQuery.of(context).viewInsets,
      duration: const Duration(milliseconds: 100),
      child: SizedBox(
        child: content,
        height: height,
      )
    );
  }
);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics