我正在尝试创建一个SimpleDialog允许用户输入其名称的。但是,显示该对话框时,屏幕键盘将其隐藏一半:
SimpleDialog
如何Dialog使它完全可见?
Dialog
编辑:我发现奇怪的是,首页小部件(FocusVisibilityDemo)识别出减小的高度,因此将“推我”按钮的位置调整为保持在中间。不幸的是,对话框的行为方式不同。
这是我的代码:
import 'package:flutter/material.dart'; class FocusVisibilityDemo extends StatefulWidget { @override _FocusVisibilityDemoState createState() => new _FocusVisibilityDemoState(); } class _FocusVisibilityDemoState extends State<FocusVisibilityDemo> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Text Dialog Demo')), body: new Center( child: new RaisedButton( onPressed: _showDialog, child: new Text("Push Me"), ), ), ); } _showDialog() async { await showDialog<String>( context: context, child: new AlertDialog( contentPadding: const EdgeInsets.all(16.0), content: new Row( children: <Widget>[ new Expanded( child: new TextField( autofocus: true, decoration: new InputDecoration( labelText: 'Full Name', hintText: 'eg. John Smith'), ), ) ], ), actions: <Widget>[ new FlatButton( child: const Text('CANCEL'), onPressed: () { Navigator.pop(context); }), new FlatButton( child: const Text('OPEN'), onPressed: () { Navigator.pop(context); }) ], ), ); } } void main() { runApp(new MaterialApp(home: new FocusVisibilityDemo())); }
如果你的使用情况是添加多个TextFields内你Dialog让你的主Form不会显得很拥挤,我觉得这是更好,如果你建立的东西不是更加个性化AlertDialog,并SimpleDialog为它们用于简单的活动(确认,radios..etc)。
TextFields
Form
AlertDialog
否则,为什么要对Dialog单个使用a TextField?
TextField
当我们添加多个TextFields时,我们应该谨慎选择设计,因为其他人将与该视图交互以填充数据,在这种情况下,我更喜欢使用class fullscreenDialog属性PageRoute。我不确定SimpleDialogFlutter 是否适合。
fullscreenDialog
PageRoute
这是一个有关如何使用的快速示例FullScreenDialog,希望此帮助,您应该能够按照自己的方式对其进行修改:
FullScreenDialog
import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: new MyApp(),)); } class MyApp extends StatefulWidget { @override MyAppState createState() => new MyAppState(); } class MyAppState extends State<MyApp> { FullScreenDialog _myDialog = new FullScreenDialog(); @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Fill this form"), ), body: new Column( children: <Widget>[ new TextField(controller: new TextEditingController( text: "Add a single text field"),), new Card(child: new ListTile( title: new Text("Click to add your top 3 amazing skills"), subtitle: new Text( "${_myDialog._skillOne} ${_myDialog._skillTwo} ${_myDialog ._skillThree}"), onTap: () { Navigator.push(context, new MaterialPageRoute( builder: (BuildContext context) => _myDialog, fullscreenDialog: true, )); }, ), ), ], ) ); } } class FullScreenDialog extends StatefulWidget { String _skillOne = "You have"; String _skillTwo = "not Added"; String _skillThree = "any skills yet"; @override FullScreenDialogState createState() => new FullScreenDialogState(); } class FullScreenDialogState extends State<FullScreenDialog> { TextEditingController _skillOneController = new TextEditingController(); TextEditingController _skillTwoController = new TextEditingController(); TextEditingController _skillThreeController = new TextEditingController(); @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Add your top 3 skills"), ), body: new Padding(child: new ListView( children: <Widget>[ new TextField(controller: _skillOneController,), new TextField(controller: _skillTwoController,), new TextField(controller: _skillThreeController,), new Row( children: <Widget>[ new Expanded(child: new RaisedButton(onPressed: () { widget._skillThree = _skillThreeController.text; widget._skillTwo = _skillTwoController.text; widget._skillOne = _skillOneController.text; Navigator.pop(context); }, child: new Text("Save"),)) ], ) ], ), padding: const EdgeInsets.symmetric(horizontal: 20.0),) ); } }
编辑
经过研究后,看来这是当前Flutter版本中的错误,此问题中也记录了临时修复程序。
import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: new FocusVisibilityDemo())); } class FocusVisibilityDemo extends StatefulWidget { @override _FocusVisibilityDemoState createState() => new _FocusVisibilityDemoState(); } class _FocusVisibilityDemoState extends State<FocusVisibilityDemo> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Text Dialog Demo')), body: new Center( child: new RaisedButton( onPressed: _showDialog, child: new Text("Push Me"), ), ), ); } _showDialog() async { await showDialog<String>( context: context, child: new _SystemPadding(child: new AlertDialog( contentPadding: const EdgeInsets.all(16.0), content: new Row( children: <Widget>[ new Expanded( child: new TextField( autofocus: true, decoration: new InputDecoration( labelText: 'Full Name', hintText: 'eg. John Smith'), ), ) ], ), actions: <Widget>[ new FlatButton( child: const Text('CANCEL'), onPressed: () { Navigator.pop(context); }), new FlatButton( child: const Text('OPEN'), onPressed: () { Navigator.pop(context); }) ], ),), ); } } class _SystemPadding extends StatelessWidget { final Widget child; _SystemPadding({Key key, this.child}) : super(key: key); @override Widget build(BuildContext context) { var mediaQuery = MediaQuery.of(context); return new AnimatedContainer( padding: mediaQuery.viewInsets, duration: const Duration(milliseconds: 300), child: child); } }