Flutter：ListView.builder滚动时重复构建组件，如何让Hello()仅构建一次？

你的问题核心在于：ListView.builder的itemBuilder会在组件进入视口时触发构建，如果每次都在builder里创建新的Hello实例，滚动时组件反复进出视口就会不断生成新实例，进而重复发起HTTP请求。要实现Hello仅构建一次并只发一次请求，需要从两个方面处理：

1. 提前预创建所有Hello组件实例 #

不要在itemBuilder里每次new Hello()，而是提前生成好所有Hello实例的列表，让ListView.builder直接返回已创建的实例：

// 在State类中提前预构建Hello实例列表
final List<Hello> _helloItems = List.generate(10, (_) => Hello());

// 然后在ListView.builder中使用
ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: _helloItems.length,
  itemBuilder: (context, i) {
    return Padding(
      padding: const EdgeInsets.only(right: 20.0),
      child: _helloItems[i], // 直接返回预创建的实例
    );
  },
),

2. 让Hello组件的HTTP请求仅执行一次 #

将Hello改为StatefulWidget，在initState中发起HTTP请求——initState只会在组件实例初始化时执行一次，后续即使组件重建（比如父组件刷新）也不会重复触发：

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

  @override
  State<Hello> createState() => _HelloState();
}

class _HelloState extends State<Hello> {
  @override
  void initState() {
    super.initState();
    // 在这里发起HTTP请求，仅执行一次
    _loadData();
  }

  Future<void> _loadData() async {
    // 替换成你的实际HTTP请求逻辑
    // 示例：
    // final response = await http.get(Uri.parse('https://your-api.com/data'));
    // 处理响应数据...
  }

  @override
  Widget build(BuildContext context) {
    // 你的组件UI代码
    return Container(
      width: 150,
      height: 100,
      color: Colors.grey[200],
      child: const Center(child: Text('Hello Item')),
    );
  }
}

额外说明 #

如果不想提前预创建实例，也可以给Hello组件加上AutomaticKeepAliveClientMixin，让组件滚动出视口时保持状态，但前提是不要在itemBuilder里每次创建新实例（否则还是会生成新的带状态的实例）。这种方式适合动态生成实例的场景，但预创建实例的方式更直接可控。

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