logo标签列表

在使用Transform转换小部件后，Stack小部件内的OnPressed无法正常工作

flutter
8
在给定的代码中，RaisedButton 的 onPressed 功能可以正常工作，并将 FlatButton 移至顶部。但是，FlatButton 的 onPressed 无法正常工作。
@override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Transform(
          transform: Matrix4.translationValues(
            0.0,
            _translateButton.value,
            0.0,
          ),
          child: FlatButton(
            onPressed: () {
              print('tapped Flat button');
            },
            child: Text('upper'),
          ),
        ),
          RaisedButton(
            onPressed: () {
              animate();
              print('tapped Raised button');
            },
            child: Text('lower'))
      ],
    );
  }

当调用animate()函数时，_translatebutton的值将从0变为-60。

 _animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 500))
      ..addListener(() {
        setState(() {});
      });
    _translateButton = Tween<double>(
      begin: 0,
      end: -60,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.0,
        0.75,
        curve: _curve,
      ),
    ));
@pskink 我无法使用AnimatedAlign控制动画的开始。 - a0x2
现在正在工作的是什么？使用Matrix4.translationValue的Transform？你指的是哪个按钮？顺便问一下，为什么没有使用Transform.translate？ - pskink
@pskink 抱歉，使用 AnimatedAlign 是可以工作的，但问题是我需要它与 Transform widget 一起工作。原因：我简化了问题，我在按钮的位置放置了 FAB，并将其放置在缺口中心。当使用 AnimatedAlign 时，shape: CircularNotchedRectangle() 不起作用。这是来自 https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc 的内容。 - a0x2
在这篇文章中，作者使用列而不是堆栈来对齐FAB，但是当使用列时，shape: CircularNotchedRectangle()无法正常工作。当我使用堆栈时它可以工作，但是onTap却不能正常工作。 - a0x2
1
https://github.com/flutter/flutter/issues/27587 - Günter Zöchbauer
显示剩余2条评论
6个回答
2
如果你的翻译使得按钮移出 Stack 区域，那么这个按钮将不再响应点击。测试这一点的一个简单方法是将你的 Stack 小部件包装在一个容器中，并将其颜色设置为蓝色（或任何明显的颜色），如果你的按钮被移到了蓝色区域之外，你就知道它失去了可点击性，因为它已经在 Stack 之外。
如果确实存在这个问题，解决方法是保持 Stack 在容器内部，然后要么设置容器的尺寸，使得按钮仍然在平移后保持在边界内，要么相对于容器重新定位小部件，使得平移仍然在边界内部。
1

上周我遇到了这个问题，在我的情况下，组合方式如下：

 Stack(
    children: [
      Widget0,
      Widget1,
      Opacity(
            opacity: sth,
            child: Transform.translate(
              offset: Offset(sth),
              child: Transform.rotate(
                angle:sth,
                child: FlatButton(
                  onPressed: (){sth},
                  child: Text("sth"),
                ),
              ),
            ),
          ),
         ],
        )

基于 rahulthakur319 在问题编号 27587 上的建议， 我将我的 Transform.translate 组合包装在一个新的 Stack 中，然后将该 Stack 包装在一个 Container 中。记住，新的 Container 应该有足够的宽度和高度来显示其子元素。我个人使用了 MediaQuery.of(context).size。 即使在复杂的动画序列中也可以正常工作。 最终代码：
Stack(
    children: [
      Widget0,
      Widget1,
      Opacity(
            opacity: sth,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Stack(
                children: [
                  Transform.translate(
                    offset: Offset(sth),
                    child: Transform.rotate(
                      angle: sth,
                      child: FlatButton(
                        onPressed: (){sth},
                        child: Text("sth"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
         ],
        )
1

将Transform小部件包装在SizedBox中（根据您的要求，可以是expanded或from size）。

1
如果有人仍在尝试解决这个问题，我通过在不想指针到达的地方使用IgnorePointer小部件包装小部件来解决了这个问题。
参考自这里。
0
我得到的答案是：在视图中，如果一个元素被翻译，那么动画将正常工作，但点击属性会以某种方式被改变，我们无法在翻译元素后使用它。
0

我曾经遇到过同样的问题，我的Switch小部件在Stack中无法正常工作。 我找到的解决方案是将其包含在具有固定宽度和高度的SizeBox或Container中。 如果您的Switch小部件在Row中，请尝试使用SizeBox在Row上添加约束条件，而不是在每个小部件中添加。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接