Flutter中ListView.Builder与Column子元素的State行为差异原因

问题 #

学习Flutter Keys相关内容时做了测试：给ColorTile组件绑定UniqueKey()，使用Column布局时，交换子元素位置能保留组件的State（颜色不会刷新）；但换成ListView.builder布局后，交换子元素会触发State重建（颜色重新随机生成）。两段代码仅布局组件不同，按照资料中"Widget类型和Key相同时Flutter不会销毁State"的说法，想明确该差异的产生原因。

原因分析 #

核心差异源于两种布局组件对子元素的Element匹配逻辑不同：

• Column的处理逻辑
  Column会直接将传入children列表中的每个Widget与对应的Element绑定。当你交换列表内Widget的位置时，Widget自身携带的UniqueKey会跟着一起移动。Flutter更新Element树时，会通过Key精准匹配到对应的Element，直接复用原有State，仅更新元素位置，不会重建State。
• ListView.builder的处理逻辑
  ListView.builder是按需构建子组件的，它会为每个子元素自动生成一个基于位置的IndexKey，且这个内置Key的优先级高于你手动设置的UniqueKey。当你交换列表中Widget的位置后，原index=1的Widget跑到了index=2的位置，ListView会认为这是一个新位置的元素，会用新的IndexKey去匹配Element，导致原Element无法被复用，只能重新创建State对象。

示例代码 #

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  late List<Widget> tiles;

  @override
  void initState() {
    super.initState();
    tiles = [
      ColorTile(key: UniqueKey()),
      ColorTile(key: UniqueKey()),
      ColorTile(key: UniqueKey()),
    ];
  }

  @override
  Widget build(BuildContext context) {
    print('build outside');
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(onPressed: swapTiles),
        /* body: Column(
          children: tiles,
        ), */
        body: ListView.builder(
          itemCount: tiles.length,
          itemBuilder: (context, index) {
            return tiles[index];
          },
        ),
      ),
    );
  }

  void swapTiles() {
    setState(() {
      tiles.insert(2, tiles.removeAt(1));
    });
  }
}

class ColorTile extends StatefulWidget {
  const ColorTile({super.key});

  @override
  State<ColorTile> createState() => _ColorTileState();
}

class _ColorTileState extends State<ColorTile> {
  final Color color = Colors.primaries[Random().nextInt(Colors.primaries.length)];

  @override
  Widget build(BuildContext context) {
    print("build ColorTile..., key: ${widget.key}");
    return Container(
      width: 100,
      height: 100,
      color: color,
    );
  }
}

环境信息：Dart SDK version: 3.0.3 (stable)，Flutter 3.10.3 • channel stable

内容的提问来源于stack exchange，提问作者user12053141