堆叠子布局的Z顺序不符合我的预期。
我在堆栈中有4个小部件,其键为:0、1、2、3。我尝试更改其z顺序并重建堆栈小部件。这是我的代码:
class TestBringToFrontPage extends StatefulWidget {
TestBringToFrontPage({Key key}) : super(key: key);
@override
State<TestBringToFrontPage> createState() => TestBringToFrontState();
}
class TestBringToFrontState extends State<TestBringToFrontPage> {
List<Widget> _widgets = [];
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
..._widgets,
Positioned(
bottom: 0,
right: 0,
child: RaisedButton(
child: Text(
"click",
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
_swap(0, 2);
_swap(1, 3);
print("$_widgets");
});
},
)),
]);
}
@override
void initState() {
super.initState();
const double start = 100;
const double size = 100;
_widgets = <Widget>[
_buildWidget(key: const Key("0"), color: Colors.blue, offset: const Offset(start, start), size: const Size(size, size)),
_buildWidget(key: const Key("1"), color: Colors.green, offset: const Offset(start + size / 2, start), size: const Size(size, size)),
_buildWidget(key: const Key("2"), color: Colors.yellow, offset: const Offset(start, start + size / 2), size: const Size(size, size)),
_buildWidget(key: const Key("3"), color: Colors.red, offset: const Offset(start + size / 2, start + size / 2), size: const Size(size, size)),
];
}
Widget _buildWidget({Key key, Color color, Offset offset, Size size}) {
final label = (key as ValueKey<String>)?.value;
return Positioned(
key: key,
left: 0,
top: 0,
child: Container(
transform: Matrix4.identity()..translate(offset.dx, offset.dy, 0),
width: size.width,
height: size.height,
decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 1.0), color: color),
child: Text(
label,
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
decoration: TextDecoration.none,
fontSize: 15.0,
),
),
));
}
void _swap(int x, int y) {
final w = _widgets[x];
_widgets[x] = _widgets[y];
_widgets[y] = w;
}
}
开始时,堆叠子项按z顺序(从下到上)布置:0、1、2、3。屏幕显示:Starting screen state image
通过单击按钮,我希望堆叠子项以新的z顺序布置:2、3、0、1。屏幕应该显示:Expected screen state image
但不符合预期,屏幕显示:Actual screen state image.
单击按钮时的控制台日志:“ [已定位-[](左侧:0.0,顶部:0.0),已定位-[](左侧:0.0,顶部:0.0),已定位-[](左:0.0,上:0.0),位置-[](左:0.0,上:0.0)]“
在Flutter检查器窗口中,堆栈子项的正确顺序为:2、3、0、1。但是堆栈会出错。
您知道我在哪里错吗?还是颤振布局问题?预先谢谢你,
[在玩了一段时间之后,我设法弄清楚了每个块上的Key
处于某种状态,使它们在setState
期间的顺序混乱了。拔出钥匙可以使您获得期望的行为。我不知道为什么会这样,但是至少现在您可以解决,无论您的目标是什么都不需要键。
无论是否存在,如果我是我,我都会提交错误报告,因为我很确定这种行为不是故意的。
这是我使用的有效代码(我对其进行了一些清理,因此不会覆盖initState
):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: TestBringToFrontPage(),
);
}
}
class TestBringToFrontPage extends StatefulWidget {
TestBringToFrontPage({Key key}) : super(key: key);
@override
State<TestBringToFrontPage> createState() => TestBringToFrontState();
}
class TestBringToFrontState extends State<TestBringToFrontPage> {
static const start = 50.0;
static const size = 250.0;
final _widgets = <Widget>[
_buildWidget(label: "0", color: Colors.blue, offset: const Offset(start, start), size: const Size(size, size)),
_buildWidget(label: "1", color: Colors.green, offset: const Offset(start + size / 2, start), size: const Size(size, size)),
_buildWidget(label: "2", color: Colors.yellow, offset: const Offset(start, start + size / 2), size: const Size(size, size)),
_buildWidget(label: "3", color: Colors.red, offset: const Offset(start + size / 2, start + size / 2), size: const Size(size, size)),
];
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
..._widgets,
Positioned(
bottom: 0,
right: 0,
child: RaisedButton(
child: Text(
"click",
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
_swap(0, 2);
_swap(1, 3);
print("$_widgets");
});
},
)),
]);
}
static Widget _buildWidget({String label, Color color, Offset offset, Size size}) {
return Positioned(
left: 0,
top: 0,
child: Container(
transform: Matrix4.identity()..translate(offset.dx, offset.dy, 0),
width: size.width,
height: size.height,
decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 1.0), color: color),
child: Text(
label,
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
decoration: TextDecoration.none,
fontSize: 30.0,
),
),
));
}
void _swap(int x, int y) {
final w = _widgets[x];
_widgets[x] = _widgets[y];
_widgets[y] = w;
}
}