Flutter Stack Bug?当在Stack(dartpad和web)中出现网络图像时，文本显示在动画小部件上

Question

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

当堆栈中有网络图像时，它会导致堆栈中的所有文本小部件出现在动画小部件的上方，而由于堆栈顺序，它们应该出现在下方。(我知道。模糊，对吧？(但是，当删除网络映像时，堆栈的行为与预期的一样。

在飞镖靶中，我有这个堆栈：

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

由于在堆栈中的位置，kitty图片应该覆盖"kitty下方的文本"，Topdraw((小部件应该同时覆盖"kitt下方和上方的文本"而"抽屉上方的文字"始终可见。然而，当通过按下汉堡来运行动画小部件时，当猫的图片被取消注释时，"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),
),
),
),
),
),
],
);
}
}

Answer 1

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