在 FlatButton 翻译后颤动 onPressed 不起作用

Question

我在使用ScrollView和时遇到了一些事件处理问题Transform。布局结构是这样的，ScrollView并且Transform存在于Stack.

我希望在inScrollView之外滚动时滚动，事件可以渗透到 ScrollView。FlatButtonContainer(Colors.cyan)

单击按下FlatButton即可工作。实际上，单击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"),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

这是 Buttons 和 Stacks 的一个已知困难，我会建议任何有此类问题的人查看Github 上的讨论。

特尔；博士：

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

1. 父小部件的区域
2. 孩子的区域（此处为 Flatbutton）

见下图：

通常的解决方案：

扩展父级的大小。

这给了我们这样的东西：

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"),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

为什么这有效

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

此外，在此 Container 之上添加一个 GestureDetector 允许我们捕获此 Container 内的任何点击。

所以最后这里是当你点击时会发生什么，如果你点击：

1. 在青色容器之外，什么也没有发生。
2. 青色容器内
   1. 在按钮外，GestureController 捕捉点击并使按钮移动
   2. 在按钮内部，Button 捕获点击，不对其执行任何操作（空方法），并将此点击标记为已处理，这会导致它不会在树中冒泡，因此 GestureController 什么也没有，什么也没有发生。

希望这可以帮助您和其他人了解所有这些工作的棘手方式。一旦你拥抱它，它就会有点美丽；)