颤振堆栈错误？在堆栈（dartpad 和 web）中存在网络图像时，文本显示在动画小部件上

Posted 2023-02-23

【中文标题】颤振堆栈错误？在堆栈（dartpad 和 web）中存在网络图像时，文本显示在动画小部件上

【英文标题】：Flutter Stack Bug? Text shows over animated widget in the presence of a network image when in Stack (dartpad and web)

【发布时间】：2020-07-03 14:28:54

【问题描述】：

我创建了这个 dartpad 来展示我所看到的。 https://dartpad.dev/4bd49a19a9db745f003375e6b0e7689e

当堆栈中有网络图像时，它会导致堆栈中的所有文本小部件出现在动画小部件的上方，而由于堆栈顺序，它们应该出现在下方。 （我知道。晦涩难懂，对吧？）然而，当网络图像被删除时，堆栈的行为与预期一样。

在 dartpad 中，我有这个 Stack：

Stack(
      children: [
        Positioned(top: 25, child: Column(children: [Text("text below kitty")])),
        Image.network('http://placekitten.com/200/300'), // <-- COMMENT OUT THIS LINE
        Positioned(top: 50, child: Column(children: [Text("text above kitty")])),
        TopDrawer(),
        Positioned(top: 75, child: Column(children: [Text("text above drawer")])),
      ],
    );

由于在堆栈中的位置，小猫图片应覆盖“小猫下方的文本”，而 Topdraw() 小部件应覆盖“小猫下方的文本和上方的文本”，而“抽屉上方的文本”始终可见。但是，当通过按下汉堡来运行动画小部件时，当猫图片未注释时，“kitty 上方的文字”是可见的......但是，当这张图片被注释掉时，文字的行为正确。

这似乎只是 chrome 和 MacOS 的问题...（和 dartpad）这在 ios 和 android 上运行正常。我使用最新的主通道代码 1.16.2-pre.41 对此进行了测试。

我认为这是一个错误，但在提交之前，我想看看我是否以错误的方式接近它。

以防飞镖板不工作，代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(body: MyPage()),
    );
  


class MyPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Stack(
      children: [
        Positioned(top: 25, child: Column(children: [Text("text below kitty")])),
        Image.network('http://placekitten.com/200/300'), // <-- COMMENT OUT THIS LINE
        Positioned(top: 50, child: Column(children: [Text("text above kitty")])),
        TopDrawer(),
        Positioned(top: 75, child: Column(children: [Text("text above drawer")])),
      ],
    );
  


class TopDrawer extends StatefulWidget 
  TopDrawer(Key key) : super(key: key);

  @override
  _TopDrawerState createState() => _TopDrawerState();


class _TopDrawerState extends State<TopDrawer>
    with SingleTickerProviderStateMixin 
  AnimationController controller;
  Animation<double> animation;
  bool _drawerState;

  @override
  void initState() 
    controller =
        AnimationController(duration: Duration(milliseconds: 200), vsync: this)
          ..addListener(() => setState(() ));

    animation = Tween(begin: 0.0, end: 200.0).animate(controller);
    _drawerState = false;
    super.initState();
  

  @override
  void dispose() 
    controller.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Stack(
      children: [
        Positioned(
          top: 0,
          left: -225,
          child: Transform.translate(
            offset: Offset((animation.value * (225 / 200)), 0.0),
            child: Container(
              height: 300,
              width: 225,
              color: Colors.pink,
            ),
          ),
        ),
        Positioned(
          top: 0,
          child: Transform.translate(
            offset: Offset(animation.value, 0.0),
            child: GestureDetector(
              onTap: () 
                setState(
                  () 
                    _drawerState = !_drawerState;
                  ,
                );
                _drawerState ? controller.forward() : controller.reverse();
              ,
              child: Container(
                height: 25,
                width: 25,
                color: Colors.pink,
                child: Transform.rotate(
                  angle: (animation.value / 200) * 3.14 / 4,
                  child: Icon(Icons.dehaze),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  

【参考方案1】：

看起来这毕竟是一个错误，但仅适用于 Flutter web 和 macos。 我在这里打开了一个错误报告： https://github.com/flutter/flutter/issues/53078 他们已经接受了它作为一个问题。