You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter实现:用Radio按钮控制ExpansionTileCard的展开与收起

实现Radio按钮控制ExpansionTileCard的展开与收起

完全可行,只需要将Radio的状态变化与ExpansionTileCard的展开收起逻辑联动即可,具体实现步骤如下:

1. 完善展开收起控制方法

通过ExpansionTileCard的GlobalKey来控制其展开或收起状态,补全你的buildExpansionToggle方法:

void buildExpansionToggle() {
  final expansionState = expansionKey.currentState;
  if (expansionState != null) {
    expansionState.toggleExpansion();
  }
}

2. 在Radio回调中同步控制卡片状态

直接在Radio的onChanged回调里,处理完选中逻辑后,触发卡片的展开/收起操作。根据需求可以选择两种方案:

方案一:Radio选中时展开,取消选中时收起

适合需要“选中即展开,取消选中即收起”的场景:

ExpansionTileCard(
  expandedTextColor: Colors.red,
  key: expansionKey,
  elevation: 0.0,
  leading: Radio(
    toggleable: true,
    activeColor: Color(0xFF000000),
    value: widget.groupValue,
    groupValue: widget.selectedRadio,
    onChanged: (value) {
      widget.onChanged(value);
      final state = expansionKey.currentState;
      if (state != null) {
        // 选中当前Radio则展开,否则收起
        value == widget.groupValue ? state.expand() : state.collapse();
      }
    },
  ),
),

方案二:点击Radio直接切换卡片状态

适合需要“点击Radio就切换卡片展开/收起”的场景(不管Radio选中状态):

ExpansionTileCard(
  expandedTextColor: Colors.red,
  key: expansionKey,
  elevation: 0.0,
  leading: Radio(
    toggleable: true,
    activeColor: Color(0xFF000000),
    value: widget.groupValue,
    groupValue: widget.selectedRadio,
    onChanged: (value) {
      widget.onChanged(value);
      // 直接触发卡片展开/收起切换
      buildExpansionToggle();
    },
  ),
),

3. 优化点击事件(可选)

你原来用GestureDetector包裹Radio可能会导致点击事件冲突,因为Radio本身已经响应点击触发onChanged,所以可以直接移除GestureDetector,避免冗余的事件嵌套。

内容的提问来源于stack exchange,提问作者Kennedy Owusu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.22 14:54:19