ExpandablePageView中itemBuilder多次执行的原因及疑问解答

问题 #

使用ExpandablePageView包开发Flutter项目时，在itemBuilder代码块中添加打印语句后，调试控制台出现多次输出，想知道该代码块多次执行的原因；另外，虽然打印语句多次执行，但每个index对应的返回组件似乎仅渲染一次，对此存在疑惑，希望得到解答。

复现代码 #

import 'package:expandable_page_view/expandable_page_view.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ExpandablePageView.builder(
              animateFirstPage: true,
              estimatedPageSize: 50,
              animationDuration: Durations.long4,
              itemCount: 3,
              itemBuilder: (context, index) {
                print(
                  "### (${DateTime.now().toString()}) Building page $index",
                );
                return ExamplePage(
                  Colors.blue,
                  index.toString(),
                  height: (index + 1) * 100.0,
                );
              },
            ),
            const SizedBox(height: 20),
            Text("UNDER PAGE VIEW WIDGET"),
          ],
        ),
      ),
    );
  }
}

class ExamplePage extends StatelessWidget {
  final Color color;
  final String text;
  final double? height;
  final double? width;

  const ExamplePage(this.color, this.text, {this.height = 0, this.width = 0});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      width: width,
      color: color,
      child: Center(child: Text(text)),
    );
  }
}

调试控制台输出 #

Restarted application in 2,369ms.
I/flutter (17494): ### (2026-04-17 07:29:18.199186) Building page 0
I/flutter (17494): ### (2026-04-17 07:29:18.353045) Building page 0
I/flutter (17494): ### (2026-04-17 07:29:22.945117) Building page 1
I/flutter (17494): ### (2026-04-17 07:29:22.961916) Building page 0
I/flutter (17494): ### (2026-04-17 07:29:22.964093) Building page 1
I/flutter (17494): ### (2026-04-17 07:29:23.128836) Building page 0
I/flutter (17494): ### (2026-04-17 07:29:23.129746) Building page 1
I/flutter (17494): ### (2026-04-17 07:29:31.794930) Building page 2
I/flutter (17494): ### (2026-04-17 07:29:31.812379) Building page 1

解答 #

1. 为什么itemBuilder会多次执行？ #

这是ExpandablePageView的特性和Flutter渲染机制共同作用的结果：

• 可变高度计算逻辑：ExpandablePageView主打支持高度可变的页面，为了得到准确的页面高度，它会先根据estimatedPageSize做估算，再实际测量真实页面高度，这个过程会多次调用itemBuilder生成Widget用于测量。
• 动画与滚动触发重建：开启animateFirstPage的首屏动画、页面滚动操作时，Flutter会触发Widget树的局部重建，ExpandablePageView会重新调用itemBuilder生成对应页面的Widget。
• 预加载机制：和原生PageView类似，ExpandablePageView默认会预加载当前页面前后的相邻页面，每次预加载都会触发itemBuilder执行。

2. 为什么打印多次但组件仅渲染一次？ #

打印的是itemBuilder的执行次数，但Flutter的三层架构（Widget、Element、RenderObject）会确保真实渲染只执行一次：

• itemBuilder返回的Widget只是配置信息，即使多次生成新的Widget实例，只要Widget的类型、key、属性完全一致，Flutter的Element树会复用对应的Element，不会重新创建。
• 真正负责屏幕绘制的是RenderObject，只有当Widget属性发生实质性变化、或者Element被销毁重建时，才会触发RenderObject的重新绘制。你的ExamplePage是StatelessWidget，属性固定，所以即使多次生成Widget，Element和RenderObject都会复用，不会重复渲染。

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