Flutter - 检测点击的TextField

Question

我在Windows上制作了一个Flutter应用程序，所有功能都正常，但是当我尝试编译到iOS时，出现了意外错误。在TextField中检测到'onTap'不是正确的参数。我不知道发生了什么，在Windows上不会返回此错误。无论如何，有人知道如何修复这个问题以及正确检测TextField上的'onTap'的方法吗？

 new Container(
          color: Colors.blue[300],
          child: new Padding(
            padding: const EdgeInsets.all(8.0),
            child: new Card(
              child: new ListTile(
                leading: new Icon(Icons.search),
                title: new TextField(
                  onTap: () { <--- The named parameter 'onTap' isn´t defined
                    Navigator.push(
                        context,

更新

我尝试了这个，但是不起作用。

 title: new GestureDetector(
            child: new TextField(
          controller: searchController,
          decoration: new InputDecoration(
              hintText: 'Buscar parcela', border: InputBorder.none),
        )),
        onTap: () {
          Navigator.push(
              context,
              new MaterialPageRoute(
                  builder: (context) => new EstatesPage(
                      parcela: widget.parcela,
                      dropdownItem: dropdownSelection)));
        },

更新2: 解决方案

我升级了Flutter和Brew，错误消失了。

- El Hombre Sin Nombre

---

如果您使用 CupertinoTextField Widget 会怎样呢？ - anmol.majhail

这个小部件怎么使用？我从来没有使用过Cupertino元素。 - El Hombre Sin Nombre

我更新了问题，并附上了一段我尝试过但不起作用的代码。 - El Hombre Sin Nombre

@Gunhan，请参考问题中的“Update 2”。onTap是最近添加的。https://github.com/flutter/flutter/pull/24536 - Günter Zöchbauer

在这个链接中，你可以找到一种方法。简要来说：将你的TextField包裹在这个代码块中： color: Colors.transparent, child: IgnorePointer( child: TextField( ), ), ),``` 注意不要改变原文的意思。 - Mo Meshkani

Answer 1

您可以将文本字段包装在 IgnorePointer 小部件中。它会禁用其子元素上的所有手势。这样，手势检测器就会起作用。

title: new GestureDetector(
            child: new IgnorePointer (
                child: new TextField(
              controller: searchController,
              decoration: new InputDecoration(
                  hintText: 'Buscar parcela', border: InputBorder.none),
            ))),
        onTap: () {
          Navigator.push(
              context,
              new MaterialPageRoute(
                  builder: (context) => new EstatesPage(
                      parcela: widget.parcela,
                      dropdownItem: dropdownSelection)));
        },

- Kushal Jain

---

OnTap 不起作用。 - Minion

它会起作用，使用 IgnorePointer :) @Minion - Aiyub Munshi

Answer 2

TextField有onTap属性，类似于GestureDetector，这使得它非常容易使用。如果你只想要onTap功能，将readOnly设置为true即可。

    TextField(
      readOnly: true,
      onTap: () {
        //Your code here
      },
      [...]
    );

同样适用于TextFormField：

    TextFormField(
      readOnly: true,
      onTap: () {
        //Your code here
      },
      [...]
    );

- Shubham

Answer 3

GestureDetector 对我没用，我使用了 InkWell。

child: InkWell(
              onTap: () {
                _selectDate(context);
              },
              child: const IgnorePointer(
                child: TextField(
                  decoration: InputDecoration(
                    labelText: 'Date',
                    hintText: 'Enter Date',
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.calendar_today_outlined),
                  ),
                ),
              ),
            ),

然后它正常工作了。

- Musanza

Answer 4

当我使用InkWell而不是GestureDetector时，它对我有效。

                InkWell(
                  child: IgnorePointer(
                    child: TextField(
                    )
                  ),
                 onTap: (){
                
                 }
               )

- Lay Leangsros

Answer 5

在文本字段中使用readonly: false来进行on tap操作

TextField(
  readOnly: true,
  onTap: () {
    // open dialogue
  }
);

- Saad Ahmed

Answer 6

我要么使用InkWell与IgnorePointer，要么使用readOnly属性设置为true的GestureDetector。这完全取决于你在这里的目的是什么。

InkWell为TextField创建了触摸交互，而IgnorePointer使TextField无法点击。

InkWell(
    onTap: () {
    debugPrint('TAP TAP TAP');
   },
  child: IgnorePointer(
   child: TextField( decoration: customDateField(),)));

同样地，将TextField上的readOnly设置为false的Gesture Detector。

GestureDetector(
    onTap: () {
    debugPrint('TAP TAP TAP');
      },
       child: TextField(
       readOnly: true,
       decoration: customDateField(),));

也可以使用内置的TextField onTap来处理触摸事件。你也可以这样做。

TextField(
         readOnly: true,
         decoration: customDateField(),
         onTap: () {
         debugPrint('Open Calendar');
                   },
         ),

基本上，如果您不想添加Inkwell提供的任何超级效果，GestureDetector就是一个不错的选择。

- MDias