Flutter实现卡片点击选中并添加红色边框功能

根据你的需求，提供两种实现方案，分别对应多选和单选场景：

方案一：单卡片独立选中（多选） #

适合每个卡片可单独切换选中/取消状态，状态由卡片自身管理。

修改后的PopUpCard完整代码：

class PopUpCard extends StatefulWidget {
  final String title;
  const PopUpCard({super.key, required this.title});

  @override
  State<PopUpCard> createState() => _PopUpCardState();
}

class _PopUpCardState extends State<PopUpCard> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 点击切换选中状态
      onTap: () => setState(() => _isSelected = !_isSelected),
      child: Card(
        // 根据状态设置边框样式
        shape: RoundedRectangleBorder(
          side: BorderSide(
            color: _isSelected ? Colors.red : Colors.transparent,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Center(
          child: Text(
            widget.title,
            // 可选：选中时文字加粗增强反馈
            style: TextStyle(
              fontWeight: _isSelected ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ),
      ),
    );
  }
}

主页调用时移除const（StatefulWidget带状态，const会限制UI更新）：

Row(
  children: [
    PopUpCard(title: '9'),
    PopUpCard(title: '8'),
    PopUpCard(title: '7'),
  ],
)

方案二：多卡片单选 #

适合一组卡片中只能选中一个的场景，状态由父组件统一管理。

父组件（主页）代码 #

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String? _selectedCardTitle;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        PopUpCard(
          title: '9',
          isSelected: _selectedCardTitle == '9',
          onTap: () => setState(() => _selectedCardTitle = '9'),
        ),
        PopUpCard(
          title: '8',
          isSelected: _selectedCardTitle == '8',
          onTap: () => setState(() => _selectedCardTitle = '8'),
        ),
      ],
    );
  }
}

修改后的PopUpCard（改为StatelessWidget） #

class PopUpCard extends StatelessWidget {
  final String title;
  final bool isSelected;
  final VoidCallback onTap;

  const PopUpCard({
    super.key,
    required this.title,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            color: isSelected ? Colors.red : Colors.transparent,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Center(
          child: Text(
            title,
            style: TextStyle(
              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ),
      ),
    );
  }
}

核心逻辑说明 #

• 用GestureDetector监听卡片点击事件，触发状态更新
• 通过Card的shape属性，根据选中状态切换红色/透明边框
• 可选添加文字样式变化，强化选中视觉反馈

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