平移按钮后按下时的颤动不起作用 [英] Flutter onPressed not works after FlatButton translate

问题描述

我在使用ScrollView和Transform时遇到了一些事件处理问题。布局结构如下，ScrollView和Transform存在于Stack内部。

我希望ScrollView在Container(Colors.cyan)中的FlatButton之外滚动，事件可以穿透到ScrollView。

单击FlatButtononPress以工作。事实上，点击FlatButton两次之后，无论您点击初始位置还是当前位置，它都不会再移动。FlatButton控件从大小范围内的初始位置移开，不再检测到单击事件，但我不理解。代码如下：

class EventListener extends StatefulWidget {
  @override
  _EventListenerState createState() => _EventListenerState();
}

class _EventListenerState extends State<EventListener> {

  Offset offset = Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("EventListener"),
      ),
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  height: 200,
                ),
                Container(
                  color: Colors.teal,
                  height: 300,
                ),
                Container(
                  color: Colors.orange,
                  height: 400,
                )
              ],
            ),
          ),
          Container(
            color: Colors.cyan,
            width: double.infinity,
            height: 400,
            alignment: Alignment.center,
            child: SizedBox(
              width: 100,
              height: 100,
              child: Transform.translate(
                offset: offset,
                child: FlatButton(
                  color: Colors.orange,
                  onPressed: () {
                    setState(() {
                      offset += Offset(50, 50);
                    });
                    print('click !');
                  },
                  child: Text("translate"),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

推荐答案

这是按钮和堆栈的已知问题，我建议有此类问题的任何人查看this discussion on Github。

TL；DR：

翻译Widget时，您可以点击的区域由两个部分组成：

1. 父小工具的区域
2. 子区域(此处为平面按钮)

见下图：

通常的解决方案：

正在扩展父级的大小。

这给我们提供了如下内容：

Container( 
  width: double.infinity,
  height: 400,
  child: Transform.translate(
    offset: offset,
    child: SizedBox(
      width: 100,
      height: 100,
      child: FlatButton(
        onPressed: () => print('tap button'),
        child: Text("translate"),
      ),
    ),
  ),
),

在此，您可以点击父容器中的任何位置。

适合您的解决方案

您实际上想要一些不同的东西：除了按钮以外的任何东西都是可单击的。为此，您需要：

1. 作为可点击区域的父级的GestureDetector
2. 具有onPressed方法但不执行任何操作的FlatButton

如果我们只希望蓝色容器可单击，则以下是最终代码：

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: EventListener(),
));

class EventListener extends StatefulWidget {
  @override
  _EventListenerState createState() => _EventListenerState();
}

class _EventListenerState extends State<EventListener> {
  Offset offset = Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("EventListener"),
      ),
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  height: 200,
                ),
                Container(
                  color: Colors.teal,
                  height: 300,
                ),
                Container(
                  color: Colors.orange,
                  height: 400,
                )
              ],
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                offset += Offset(50, 50);
              });
            },
            child: Container(
              width: double.infinity,
              height: 400,
              color: Colors.cyan,
              alignment: Alignment.center,
              child: Transform.translate(
                offset: offset,
                child: SizedBox(
                  width: 100,
                  height: 100,
                  child: FlatButton(
                    color: Colors.orange,
                    onPressed: () {},
                    child: Text("translate"),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

此操作的原因

如前所述，父级为青色容器，此容器中的任何区域都将使该按钮可单击。

此外，在此容器顶部添加GestureDetector允许我们捕获此容器内的任何分路器。

最后，如果您单击，则会发生以下情况：

1. 在青色容器之外，没有任何反应。
2. 青色容器内部
   1. 在按钮外面，GestureController抓住轻击并使按钮移动
   2. 在按钮内部，Button捕捉点击，不对其执行任何操作(空方法)，并将此点击标记为已处理，这会导致它不会在树中向上泡沫，因此GestureController不会得到任何内容，也不会发生任何事情。

希望这能帮助您和其他人理解所有这些工作方式的微妙之处。一旦你拥抱了它，它就有点美了；)

这篇关于平移按钮后按下时的颤动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！