Flutter技术问题：如何点击切换InfoCard组件的isActive状态

因为InfoCard是无状态组件（StatelessWidget），自身无法维护状态，所以需要将激活状态（isActive）的管理逻辑放到父组件（仪表盘页面）中，具体步骤如下：

1. 将仪表盘页面改为StatefulWidget #

如果你的仪表盘页面当前是StatelessWidget，需要改成StatefulWidget，在其状态类中维护卡片的激活状态：

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

  @override
  State<DashboardPage> createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  // 初始化卡片激活状态为false
  bool _isCardActive = false;

  @override
  Widget build(BuildContext context) {
    // 此处省略仪表盘页面其他布局代码，仅展示InfoCard部分
    return InfoCard(
      title: "Scylla Serrata",
      value: "56",
      topColor: Colors.brown,
      // 将父组件维护的状态传递给InfoCard
      isActive: _isCardActive,
      onTap: () {
        // 点击卡片时切换状态，触发页面重绘
        setState(() {
          _isCardActive = !_isCardActive;
        });
      },
    );
  }
}

2. 修复InfoCard中的colorScheme获取问题 #

原InfoCard代码中直接使用colorScheme会报错，需要在build方法中通过Theme获取主题色方案：

@override
Widget build(BuildContext context) {
  // 添加此行获取当前主题的色方案
  final colorScheme = Theme.of(context).colorScheme;
  
  return Expanded(
    // 原组件其余代码保持不变...
  );
}

原理说明 #

StatelessWidget的所有属性都是不可变的，无法自行更新状态。通过将状态提升到父级StatefulWidget，点击卡片时调用setState()更新状态，父组件会重新构建并将新的isActive值传递给InfoCard，从而触发卡片重绘，实现文本颜色的高亮切换。

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