我在抽屉中使用“文本”字段,如GIF所示,问题是当我选择文本字段时,它隐藏在键盘下而不向上滚动。
代码说明:
首先,我通过将文本字段包装在Scaffold和Single Child滚动视图中来实现文本字段,如下面的代码所示,当我选择文本字段时,该字段与键盘一起滚动,效果很好,但是问题是当我选择相同的文本字段,该文本字段添加在“抽屉”中,隐藏下键盘而不滚动。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainView(),
);
}
}
class MainView extends StatefulWidget {
@override
_MainViewState createState() => _MainViewState();
}
class _MainViewState extends State<MainView> {
/// Unique scaffold key used for drawer
var scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
backgroundColor: Colors.white,
endDrawer: DrawerWidget(),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height / 1.5,
),
_buildButton(),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
decoration: new InputDecoration(
hintText: 'Text Field',
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
)),
),
],
),
),
),
);
}
Widget _buildButton() {
return MaterialButton(
color: Colors.black,
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Text(
'Open End Drawer',
style: TextStyle(fontSize: 15),
),
onPressed: () {
scaffoldKey.currentState.openEndDrawer();
},
minWidth: 50,
height: 30,
textColor: Colors.white,
);
}
}
带文本的抽屉字段
class DrawerWidget extends StatefulWidget {
@override
_DrawerWidgetState createState() => _DrawerWidgetState();
}
class _DrawerWidgetState extends State<DrawerWidget> {
@override
Widget build(BuildContext context) {
return SizedBox(
key: Key('drawer_sized_box'),
width: MediaQuery.of(context).size.width * 0.35,
child: Drawer(
child: Column(children: [
SizedBox(
height: MediaQuery.of(context).size.height / 1.5,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
decoration: new InputDecoration(
hintText: 'Text Field',
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
),
),
)
])),
);
}
}