PS: 接触Flutter已经有一段时间了，默默的撸app也快接近尾声了，其中遇到了蛮多坑（或许也不叫做坑，只是功夫不够深^^），不过感觉都有惊无险的度过了。然鹅，小白的开拓之路注定是坎坷的，这不又遇到难题了。。。“在模态框里有输入框弹出键盘”，首先想的是用系统提供的showModalBottomSheet，然而，因为高度的限制，输入框注定被键盘挡住， 那肿么办呢。。。经过一系列尝试终于找到办法了，分享下解决方案:
- 国际惯例
input.gif
- 先创建一个带输入框的半透明的页面
import 'package:flutter/material.dart';
class BottomInputDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.transparent,
body: new Column(
children: <Widget>[
Expanded(
child: new GestureDetector(
child: new Container(
color: Colors.black54,
),
onTap: () {
Navigator.pop(context);
},
)
),
new Container(
height: 50,
color: Colors.white,
child: TextField(
autofocus: true,
maxLines: 100,
)
)
],
),
);
}
}
- 关键：代码跳转上面半透明页面时选择自定义的Route, 代码如下：
import 'package:flutter/material.dart';
class PopRoute extends PopupRoute{
final Duration _duration = Duration(milliseconds: 300);
Widget child;
PopRoute({@required this.child});
@override
Color get barrierColor => null;
@override
bool get barrierDismissible => true;
@override
String get barrierLabel => null;
@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return child;
}
@override
Duration get transitionDuration => _duration;
}
- 调用方式很简单，
Navigator.push(context, PopRoute(child: BottomInputDialog()));
