Flutter - showModalBottomSheet 自定义高度 和 TextField 输入框,键盘弹出的bug
2020-04-13 17:49 浏览(1393

如何自定义 showModalBottomSheet   的高度

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

在builder 中返回带高度的 SizedBox 即可自定义高度

showModalBottomSheet(
  isScrollControlled:true,
  context: context,
  backgroundColor: Colors.white.withAlpha(0),
  builder: (BuildContext context) {
 
    double height = 240;
    return SizedBox(
      child: content,
      height: height,
    );
  }
);


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

在builder 中返回的组件用 AnimatedPadding 包裹即可。(参考 https://juejin.im/post/5ce02760e51d45107d7cb846

showModalBottomSheet(
  isScrollControlled:true,
  context: context,
  backgroundColor: Colors.white.withAlpha(0),
  builder: (BuildContext context) {
 
    double height = 240;
    return AnimatedPadding(
      padding: MediaQuery.of(context).viewInsets,
      duration: const Duration(milliseconds: 100),
      child: SizedBox(
        child: content,
        height: height,
      )
    );
  }
);


评论(4)

Kiwi2021

大家认为flutter怎么样,有必要去学吗?

作者:怎么改名字啊
链接:https://www.zhihu.com/question/400619504/answer/1275734274
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

曾做过三个flutter项目和一个react native项目,SG飞艇大概说说感受首先Flutter他是个跨平台的图形渲染引擎,他的绘制效率很高,有时候甚至能超过原生组件绘制性能上比,React native运行是需要将js做转换的,转换完后再绘制原生组件,如果碰到原生组件的差异问题还是很麻烦处理的,效率肯定不如flutter好技术选型时还要考虑的一个就是技术的相关生态,目前react native有一种半死不死的假象,我们还发生了个小插曲,去年的项目,今年再打开的时候,发现依赖包都已经下不到了,2333。相比,flutter却在蒸蒸日上,在官方和民间的一起努力下在慢慢变好,不断有大厂加入提升社区活跃度,一片欣欣向荣的景象目前Flutter官方提供了Material design 和 cupertino两种风格的组件库,极速赛车说实话,都不太符合国人审美,所以还是需要花费很多时间去封装组件的然后就是语言上了,我认为,作为一个前端,掌握一门静态类型的语言不是什么坏事,对学习使用ts有加成作用。flutter使用的dart语言就是个缝合怪,一股面向对象的味道,有着java类似的风格,还有其他一些语言的优秀特性,类似c#的命名参数还是挺棒的,但是他没有反射?!英国乐透8几十个包含了大量toJson和fromJson方法的文件过于美观(无奈)在下个更好的跨平台方案出来前,Flutter不得不说是个很好的选择用不用他,就看其他同事意愿和个人对他的理解程度吧在没有明确要求使用的情况下,至少去Hello world尝试下吧,为自己的快速提升,提供一种可能性

2021-11-17 11:40 0 回复
发布评论
回复X
聊天室(0