Flutter中点击Card卡片时如何修改其内部文本的颜色？

要实现点击Card动态修改内部文本颜色的效果，需要通过StatefulWidget维护点击状态，调整步骤如下：

• 首先将当前无状态组件改为有状态组件（StatefulWidget），用于存储可变的点击状态
• 在State类中定义布尔类型的状态变量，用来标记当前卡片是否被点击
• 在GestureDetector的onTap回调中调用setState切换状态变量的值
• 给Text组件的style属性配置动态颜色，根据状态变量返回对应颜色值

完整示例代码 #

// 首先将组件改为StatefulWidget
class ClickableCard extends StatefulWidget {
  final String title;
  const ClickableCard({super.key, required this.title});

  @override
  State<ClickableCard> createState() => _ClickableCardState();
}

class _ClickableCardState extends State<ClickableCard> {
  // 定义状态变量，标记卡片是否被点击，默认未点击
  bool _isTapped = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
      child: GestureDetector(
        onTap: () {
          // 切换点击状态，触发UI重绘
          setState(() {
            _isTapped = !_isTapped;
          });
        },
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            // 动态设置文本颜色
            child: Text(
              widget.title,
              style: TextStyle(
                // 点击时为红色，未点击为默认黑色，可自行替换为需要的颜色值
                color: _isTapped ? Colors.red : Colors.black,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如果需要实现点击后仅变色一次、触发其他逻辑后恢复等自定义效果，直接修改onTap内的状态赋值逻辑、以及Text的color判断规则即可。

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