在Flutter中使用setState结合for循环实现奇偶数字展示按钮

存在的核心问题 #

• 显示内容错误：ListView.builder的itemBuilder里返回的是Text(index.toString())，而非你存入items列表的Widget，导致实际显示的是索引值，不是目标数字文本。
• 数据重复累积：每次点击按钮仅向items列表追加元素，未清空原有数据，多次点击同一按钮会重复显示相同内容。
• Widget存储不合理：直接存储Text Widget灵活性差，应该存储数字数据，再根据数据生成UI组件，便于后续样式或逻辑调整。

修复后的代码 #

class _MyHomePageState extends State<MyHomePage> {
  // 改为存储数字列表，分离数据与UI
  List<int> numbers = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("For Loop"),
      ),
      body: Column(
        children: [
          ElevatedButton(
            child: const Text('All Numbers'),
            onPressed: () {
              numbers.clear();
              for (int i = 0; i < 10; i++) {
                numbers.add(i);
              }
              setState(() {});
            },
          ),
          ElevatedButton(
            child: const Text('Odd Numbers'),
            onPressed: () {
              numbers.clear();
              for (int i = 0; i < 10; i++) {
                if (i % 2 == 1) {
                  numbers.add(i);
                }
              }
              setState(() {});
            },
          ),
          ElevatedButton(
            child: const Text('Even numbers'),
            onPressed: () {
              numbers.clear();
              for (int i = 0; i < 10; i++) {
                if (i % 2 == 0) {
                  numbers.add(i);
                }
              }
              setState(() {});
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: numbers.length,
              itemBuilder: (context, index) {
                // 根据存储的数字生成对应Text组件
                return Container(
                  padding: const EdgeInsets.all(8),
                  child: Text(numbers[index].toString()),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

1. 数据存储优化：将List<Widget> items改为List<int> numbers，遵循数据与UI分离的原则，提升代码可维护性。
2. 清空旧数据：每次点击按钮前调用numbers.clear()，避免重复数据累积。
3. 修正显示逻辑：在ListView.builder中使用numbers[index]生成Text组件，确保显示正确的目标数字。
4. 额外添加padding优化列表项的显示间距（可选调整）。

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