在TextFormField上捕捉点击事件

时间:2017-12-21 17:22:01

标签: flutter gesturedetector

我正在尝试将TextFormField上的tap事件捕获到flutter Form中。

我使用GestureDetector将TextFormField作为子元素进行操作,但点击它时没有触发:

time

如果我更换:

SELECT
  id,
  time_ts AS `time.ts`
FROM `bigquery-public-data.hacker_news.comments` 
LIMIT 10;

通过一个简单的容器,它正在运行:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(title: const Text('Recherche de sorties')),
      body: new DropdownButtonHideUnderline(
        child: new Form(
          key: _formKey,
          autovalidate: _autovalidate,
          child: new ListView(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              children: <Widget>[
                new DatePicker(
                  labelText: 'Date',
                  selectedDate: widget.request.dateDebut,
                  initialDate: widget.request.dateDebut,
                  firstDate: new DateTime.now().add(new Duration(days: -1)),
                  lastDate: new DateTime.now().add(new Duration(days: 365 * 4)),
                  selectDate: (DateTime value) {
                    setState(() {
                      widget.request.dateDebut = value;
                    });
                  },
                  datePickerMode: DatePickerMode.day,
                  icon: const Icon(Icons.date_range),
                ),
                new InputDecorator(
                  decoration: const InputDecoration(
                    labelText: 'Rayon',
                    hintText: '-- Choisissez un rayon --',
                    icon: const Icon(Icons.settings_backup_restore),
                  ),
                  isEmpty: widget.request.rayon == null,
                  child: new DropdownButton<String>(
                    value: widget.request.rayon.toString(),
                    isDense: true,
                    onChanged: (String newValue) {
                      setState(() {
                        widget.request.rayon = int.parse(newValue);
                      });
                    },
                    items: _rayons.keys.map((int key) {
                      return new DropdownMenuItem<String>(
                        value: key.toString(),
                        child: new Text(_rayons[key]),
                      );
                    }).toList(),
                  ),
                ),

                new GestureDetector(
                  onTap: () async {
                    print("Container clicked");

                    Prediction p = await showGooglePlacesAutocomplete(
                        context: context,
                        apiKey: Consts.googlePlacesApiKey,
                        mode: Mode.fullscreen,
                        language: "fr",
                        components: [new Component(Component.country, "fr")]);

                    if (p != null) {
                      (_scaffoldKey.currentState).showSnackBar(
                          new SnackBar(content: new Text(p.description)));
                    }
                  },
                  child: new TextFormField(
                    // controller: controller,
                    decoration: const InputDecoration(
                      icon: const Icon(Icons.room),
                      hintText: 'Où êtes vous ?',
                      labelText: 'Localisation',
                    ),
                  ),
                ),

                new Container(
                    padding: const EdgeInsets.all(20.0),
                    alignment: Alignment.center,
                    child: new Align(
                      alignment: const Alignment(0.0, -0.2),
                      child: new ButtonBar(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          new RaisedButton(
                            child: const Text('ANNULER'),
                            onPressed: _fermerCritereRecherche,
                          ),
                          new RaisedButton(
                            child: const Text('VALIDER'),
                            onPressed: _valider,
                          ),
                        ],
                      ),
                    )),
              ]),
        ),
      ),
    );
  }

您是否有任何想法如何使GestureDetector与TextFormField一起使用?也许与控制器,但我尝试没有任何成功 提前致谢

4 个答案:

答案 0 :(得分:6)

我通过使用InputDecorator(来自flutter gallery)找到了解决方案:

          child: new InputDecorator(
                decoration: const InputDecoration(
                  labelText: 'Localisation',
                  icon: const Icon(Icons.room),
                ),
                child: widget.request.localisationLibelle != null
                    ? new Text(widget.request.localisationLibelle)
                    : new Text("-- Choisissez un lieu --"),
              ),

我没有使用TextFormField来捕捉GestureDetector位置的点击,而是使用InputDecorator小部件的简单子Text。

答案 1 :(得分:2)

我自己使用Flutter 0.6.0解决了这个问题。

GestureDetector对象采用行为属性from this enum来确定如何推迟操作。

GestureDetector的小片段优先于TextFormField:

new GestureDetector(
   onTap: onTap,
   behavior: HitTestBehavior.opaque,
   child: new TextFormField(
     enabled: onTap == null,
     *other stuff here*
   ),
)

onTap对象是我在此之外声明的Function对象。我还基于onTap对象设置了enabled属性,因此可以确保如果要捕获水龙头,则禁用文本表单字段。

答案 2 :(得分:2)

使用AbsorbPointer小部件包装TextFormField小部件,然后OnTap()肯定可以工作

这是一个示例:-

Faker<T>

用手势检测器包装AbsorbPointer小部件,然后在onTap()中工作。它将正常工作。

答案 3 :(得分:1)

只需使用onTap的{​​{1}}方法:

TextFormField