显示没有被键盘覆盖的文本字段对话框？

Question

我正在尝试创建一个允许用户输入其名称的SimpleDialog。

我怎样才能获得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())); 
} 

Answer 1

如果您的使用情况是里面添加多个TextFields你Dialog所以你的主要Form不会显得很拥挤，我认为如果你建立的东西比AlertDialog更加个性化是更好和SimpleDialog，因为它们用于简单的活动（确认，收音机等）。

否则，您为什么要为单个TextField使用Dialog？

当我们添加多个TextField我们应该有的仔细了解我们的设计选择，因为其他人会用这个观点互动，填写数据，在这种情况下，我更喜欢使用PageRoute类fullscreenDialog财产。我不确定SimpleDialog是否适合Flutter。

下面是关于如何使用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),) 
    ); 
    } 


} 

编辑

做一些后研究，似乎this is a bug在目前的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.padding, 
     duration: const Duration(milliseconds: 300), 
     child: child); 
    } 
}