Flutter中如何移除flutter_form_builder的FormBuilderChoiceChip动画对勾?
移除FormBuilderChoiceChip选中时的动画对勾方案
目前flutter_form_builder包的FormBuilderChoiceChip没有直接提供隐藏选中对勾的配置项,但可以通过以下两种方式解决:
1. 局部Theme覆盖(推荐)
利用Flutter的Theme系统,在FormBuilderChoiceChip外层套一个Theme组件,修改chipTheme的showCheckmark属性为false,全局隐藏该组件内所有ChoiceChip的选中对勾:
Theme( data: Theme.of(context).copyWith( chipTheme: Theme.of(context).chipTheme.copyWith( showCheckmark: false, ), ), child: FormBuilderChoiceChip( initialValue: 'multi', name: 'choices', options: [ FormBuilderChipOption( avatar: SizedBox.shrink(), value: 'multi', child: Container( width: 100, height: 100, child: Center(child: Text('Multi-choice')), ), ), // 其他选项 ], ), )
2. 自定义单个选项的Chip样式
如果只想隐藏特定选项的对勾,可以给FormBuilderChipOption设置showCheckmark: false(该参数直接透传给底层的原生ChoiceChip):
FormBuilderChoiceChip( initialValue: 'multi', name: 'choices', options: [ FormBuilderChipOption( showCheckmark: false, // 隐藏当前选项的选中对勾 avatar: SizedBox.shrink(), value: 'multi', child: Container( width: 100, height: 100, child: Center(child: Text('Multi-choice')), ), ), // 其他选项 ], )
如果上述参数因包版本不生效,还可以通过设置checkmarkColor为透明色,同时让选中背景色与未选中状态一致,间接隐藏对勾:
FormBuilderChipOption( checkmarkColor: Colors.transparent, selectedColor: Colors.white, // 与未选中背景色保持一致 avatar: SizedBox.shrink(), value: 'multi', child: Container( width: 100, height: 100, child: Center(child: Text('Multi-choice')), ), )
内容的提问来源于stack exchange,提问作者Kdon
相关产品推荐
相关产品推荐

