顯示沒有被鍵盤覆蓋的文本字段對話框？

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); 
    } 
}