使用键盘推送表单以及如何删除Dropdown Arrow

Question

我正在尝试开发一个输入表单，目前页面看起来像这样，这是非常好的：

但是，有一些我无法弄清楚如何完成的事情：

1. 如何删除DropDown箭头图标？
2. 当用户点击TextField输入日期时，键盘会打开并打开所有UI，如下图所示。
3. 有没有办法拦截TextField上的点击操作，这样我就可以阻止键盘打开，而是显示一个DatePicker？ （因此用户将看到TextField，但无法手动编辑它。）当用户点击TextField旁边的图标时，我已经打开了一个DatePicker。

以下是键盘打开时的外观：

这个页面的代码很长，所以这里是完整的代码on GitHub。

Answer 1

1.和2.是直截了当的答案：

您可以在iconSize小部件中指定DropdownButton为0.0，它可以有效地删除图标：

DropdownButton(
  iconSize: 0.0,
  ...
)

因为your BoxDecoration，你需要在你的Padding小部件中添加一个Text：

DropdownMenuItem<Project>(
  value: value,
  child: Padding(
      padding: EdgeInsets.only(right: 20.0),
      child: Text(value.name, style: TextStyle(fontSize: 25.0))));

您可能希望根据需要调整padding值。

要避免软键盘推送您的内容，您可以在resizeToAvoidBottomPadding中将false指定为Scaffold，它应位于小部件树的顶部：

Scaffold(
  resizeToAvoidBottomPadding: false,
  ...
)

对于3.我认为你不应该使用TextField，而是使用带有Text或GestureDetector的InkWell（InkWell授予一些材料突出显示效果）因为在这种情况下你不需要TextField的属性：

GestureDetector(
  onTap: () {
    // Your code to show the DatePicker and make use of it.
    showDatePicker();
    ...
  },
  child: Text(dateText)
)

Answer 2

早上好，

所以对于第一个问题，我不确定它目前是否可行，但是一种方法是将iconSize设置为0.0我现在无法测试它但它应该可行。

第二个是由一个页面中的2个脚手架引起的。我可以看到必须在Scaffold中的bottomnavbar，我很确定“输入表单”页面也在Scaffold中，所以从这个页面中删除脚手架，问题就解决了。

对于第三个，我建议不要使用TextField打开DatePicker，绝对不推荐。您可以创建一个看起来像文本字段的小部件，并使用GestureDetector拦截“onTap”。

希望这会对你有所帮助，

祝你今天愉快