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
相关产品推荐
相关产品推荐

