FlatButton 翻译后 Flutter onPressed 不起作用

Question

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

我想让ScrollView在Container(Colors.cyan)中的FlatButton外滚动时滚动，事件可以渗透到ScrollView。

点击 FlatButton onPress 开始工作。实际上，点击两次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 的一个已知问题，我建议遇到此类问题的任何人查看 this discussion on Github .

长话短说:

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

1. 父部件的区域
2. child 的区域(这里是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"),
      ),
    ),
  ),
),

在这里您可以点击父 Container 中的任意位置。

为您解决

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

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

希望这可以帮助您和其他人理解所有这些工作的棘手方式。一旦你拥抱它，它就会变得很美 ;)