Flutter 点击Card时如何修改文本样式，实现删除线及颜色变更

因为需要动态更新UI样式，你需要通过状态管理控制文本样式的切换，具体操作如下：

• 优先将Todo项抽为独立的StatefulWidget，让每个卡片自己管理点击状态，避免多个todo项的状态互相干扰
• 定义布尔类型的状态变量存储当前卡片的完成状态，在GestureDetector的onTap回调中调用setState切换状态
• 根据状态变量的取值，动态设置Text组件的删除线、文字颜色样式

方案1：卡片自身管理状态（简单场景适用） #

// 单独抽离的Todo卡片组件
class TodoItem extends StatefulWidget {
  final String title;
  const TodoItem({super.key, required this.title});

  @override
  State<TodoItem> createState() => _TodoItemState();
}

class _TodoItemState extends State<TodoItem> {
  // 标记当前todo是否完成
  bool _isCompleted = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
      child: GestureDetector(
        onTap: () {
          // 点击切换完成状态
          setState(() {
            _isCompleted = !_isCompleted;
          });
        },
        child: Card(
          child: Container(
            padding: const EdgeInsets.all(12.0),
            child: Text(
              widget.title,
              style: TextStyle(
                // 完成时显示删除线
                decoration: _isCompleted ? TextDecoration.lineThrough : TextDecoration.none,
                // 完成时文字改为灰色，可自定义色值
                color: _isCompleted ? Colors.grey : Colors.black,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// 原来的_buildTodoItem方法直接调用封装好的组件即可
Widget _buildTodoItem(String title) {
  return TodoItem(title: title);
}

方案2：上层统一管理状态（需要批量操作todo场景适用） #

如果需要在上层统一维护所有todo的完成数据，可将状态和点击回调从上层传入，组件改为无状态即可：

class TodoItem extends StatelessWidget {
  final String title;
  final bool isCompleted;
  final VoidCallback onTap;
  const TodoItem({
    super.key,
    required this.title,
    required this.isCompleted,
    required this.onTap
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
      child: GestureDetector(
        onTap: onTap,
        child: Card(
          child: Container(
            padding: const EdgeInsets.all(12.0),
            child: Text(
              title,
              style: TextStyle(
                decoration: isCompleted ? TextDecoration.lineThrough : TextDecoration.none,
                color: isCompleted ? Colors.grey : Colors.black,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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