Flutter Stack Bug？在堆栈（飞镖板和Web）中，当存在网络图像时，文本将通过动画小部件显示。

Question

我创建了此dartpad来显示我所看到的。https://dartpad.dev/4bd49a19a9db745f003375e6b0e7689e

[当堆栈中有网络图像时，由于堆栈顺序，它们应在下方显示时，堆栈中的所有文本窗口小部件都将显示在动画窗口小部件的上方。 （我知道。晦涩，对吗？）但是，当删除网络映像时，堆栈的行为符合预期。

在dartpad中，我有这个堆栈：

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（）小部件应涵盖“小猫下方的文字和小猫上方的文字”，而“抽屉上方的文字”始终可见。但是，当通过按下汉堡包运行动画小部件时，如果未注释猫的图片，则可以看到“小猫上方的文本”……但是，当注释掉该图片时，文本的行为正确。

这似乎仅是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),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1