Flutter showModalBottomSheet TextField AnimatedPadding SizedBox 技术 Flutter - showModalBottomSheet 自定义高度 和 TextField 输入框，键盘弹出的bug 2020-04-13 17:49 3760 更新于 2020-04-13 17:49 ### 如何自定义 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, ) ); } ); ```
