Flutter 布局問題：堆棧 z 順序不起作用

Question

堆棧子布局的 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。 屏幕顯示：啟動屏幕 state 圖像

通過單擊按鈕，我希望堆棧子項以新的 z 順序排列：2,3,0,1。 屏幕應顯示：預期屏幕 state 圖像

但與預期不同，屏幕顯示：實際屏幕 state 圖像。

單擊按鈕時的控制台日志：“[Positioned-[<'2'>](left: 0.0, top: 0.0), Positioned-[<'3'>](left: 0.0, top: 0.0), Positioned-[ <'0'>](左：0.0，上：0.0)，定位-[<'1'>](左：0.0，上：0.0)]"

在 Flutter 檢查員 window 中，堆棧子項的順序正確：2,3,0,1。 但是堆棧呈現錯誤。

你知道我錯在哪里還是 flutter 布局問題？ 先感謝您，

Answer 1

在玩了一會兒你的代碼之后，我設法弄清楚每個塊上的Key都持有一些 state ，這會在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;
  }
}