时间戳

首页 > 解决方案 > 表单被键盘向上推以及如何删除下拉箭头

dart - 表单被键盘向上推以及如何删除下拉箭头

问题描述

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

报告页面

但是，有几件事我不知道如何完成：

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

以下是键盘打开时的外观： 在此处输入图像描述

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

标签： dartflutter

解决方案

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

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

DropdownButton(
  iconSize: 0.0,
  ...
)

由于您的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.我认为你不应该使用 a TextField，而应该使用 aText和 a GestureDetectoror InkWell（InkWell授予一些材料突出显示飞溅效果），因为在这种情况下你不需要 a 的属性TextField：

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

推荐阅读