Flutter：子组件内条件判断后如何更新状态切换组件？

问题根源 #

你当前的代码存在两个核心问题：

1. itemCount是全局变量，它的变化不会触发MyApp组件的重建，导致父组件里的总值判断逻辑无法实时更新
2. Tiles组件内的setState只会刷新自身，不会通知父组件MyApp重新计算总值并切换显示内容

修复方案 #

把状态管理收拢到父组件MyAppState中，让父组件统一控制状态变化并触发重建：

• 将全局的itemCount移到MyAppState内部，作为组件的状态变量
• 在MyAppState中定义修改计数的方法，传递给子组件Tiles调用
• 移除Tiles自身的setState，通过调用父组件的方法来更新状态

修改后的完整代码 #

主文件代码

import 'widgets/tiles.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  // 将itemCount改为组件内部状态
  Map<int, int> itemCount = {};

  @override
  void initState() {
    super.initState();
    // 初始化计数数据
    for (var i = 0; i < 4; i++) {
      itemCount[i] = 1;
    }
  }

  // 定义修改计数的方法
  void updateCount(int index, bool isIncrement) {
    setState(() {
      itemCount.update(
        index,
        (value) => isIncrement ? ++value : --value,
      );
    });
  }

  // 计算总计数
  int get totalCount => itemCount.values.reduce((a, b) => a + b);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          totalCount == 0
              ? const Center(
                  child: Text(
                    'Test Complete.',
                  ),
                )
              : Padding(
                  padding: const EdgeInsets.all(25.0),
                  child: ListView.builder(
                    itemCount: itemCount.length,
                    shrinkWrap: true,
                    padding: EdgeInsets.zero,
                    itemBuilder: (context, index) {
                      // 将updateCount方法传递给Tiles
                      return Tiles(
                        indexValue: index,
                        currentCount: itemCount[index]!,
                        updateCount: updateCount,
                      );
                    },
                  ),
                )
        ],
      ),
    );
  }
}

tiles.dart代码

import 'package:flutter/material.dart';

class Tiles extends StatelessWidget {
  final int indexValue;
  final int currentCount;
  final Function(int, bool) updateCount;

  const Tiles({
    super.key,
    required this.indexValue,
    required this.currentCount,
    required this.updateCount,
  });

  @override
  Widget build(BuildContext context) {
    if (currentCount > 0) {
      return Card(
        elevation: 0,
        semanticContainer: false,
        child: ListTile(
          title: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.remove, color: Colors.black),
                onPressed: () => updateCount(indexValue, false),
              ),
              Text(
                currentCount.toString(),
                style: const TextStyle(color: Colors.black, fontSize: 16),
              ),
              IconButton(
                icon: const Icon(Icons.add, color: Colors.black),
                onPressed: () => updateCount(indexValue, true),
              )
            ],
          ),
        ),
      );
    }
    return const SizedBox.shrink();
  }
}

额外说明 #

• 把Tiles改成了StatelessWidget，因为它不再需要自己维护状态，所有状态都由父组件管理
• 通过updateCount回调方法，父组件可以统一处理计数变化并触发自身重建，这样总值判断逻辑就能实时生效
• 初始化逻辑移到了MyAppState的initState中，符合Flutter组件的生命周期规范

内容的提问来源于stack exchange，提问作者ЯДPTГФИ