dart – 显示文本字段对话框而不被键盘覆盖？

概述我正在尝试创建一个允许用户输入其名称的SimpleDialog.但是当它显示时,对话框被屏幕键盘隐藏了一半： 如何让Dialog完全可见？ 编辑：我觉得奇怪的是,主页小部件(FocusVisibilityDemo)识别出降低的高度,因此调整“推送我”按钮的位置以保持在中心.不幸的是,对话框的行为方式不同. 这是我的代码： import 'package:flutter/material.dart' 我正在尝试创建一个允许用户输入其名称的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()));}

解决方法 如果您的用例是在Dialog中添加多个TextFIEld,这样您的主表单就不会变得拥挤,我认为如果你构建一些比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')),child: new _Systempadding(child: new AlertDialog(        contentpadding: const EdgeInsets.all(16.0),);  }}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);  }}

总结

以上是内存溢出为你收集整理的dart – 显示文本字段对话框而不被键盘覆盖？全部内容，希望文章能够帮你解决dart – 显示文本字段对话框而不被键盘覆盖？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。