如何调整Flutter中RadioListTile的Radio图标宽高及粗细?
调整Flutter RadioListTile中Radio图标尺寸与粗细的可行方案
方法1:用Transform.scale快速缩放默认Radio
直接对Radio组件进行缩放,同时调整图标大小和线条粗细,适合快速调整需求:
RadioListTile( value: 1, groupValue: _selectedValue, onChanged: (value) => setState(() => _selectedValue = value), title: const Text('缩放后的选项'), controlAffinity: ListTileControlAffinity.trailing, secondary: Transform.scale( scale: 1.5, // 大于1放大,小于1缩小 child: Radio( value: 1, groupValue: _selectedValue, onChanged: (value) => setState(() => _selectedValue = value), ), ), )
方法2:通过Theme自定义Radio样式
利用RadioThemeData精细调整Radio的尺寸、线条粗细等属性:
Theme( data: Theme.of(context).copyWith( radioTheme: RadioThemeData( visualDensity: const VisualDensity(horizontal: 4, vertical: 4), // 调整整体图标大小 shape: const CircleBorder( side: BorderSide(width: 2.5), // 未选中状态下的线条粗细 ), fillColor: MaterialStateProperty.all(Colors.deepPurple), splashRadius: 22, // 点击水波纹范围 ), ), child: RadioListTile( value: 2, groupValue: _selectedValue, onChanged: (value) => setState(() => _selectedValue = value), title: const Text('Theme定制的选项'), ), )
方法3:完全自定义Radio图标
如果默认Radio的样式无法满足需求,直接替换为自定义图标,实现完全控制:
RadioListTile( value: 3, groupValue: _selectedValue, onChanged: (value) => setState(() => _selectedValue = value), title: const Text('完全自定义的选项'), controlAffinity: ListTileControlAffinity.trailing, secondary: _selectedValue == 3 ? const Icon(Icons.circle, size: 30, color: Colors.orange) // 选中状态图标 : const Icon(Icons.circle_outlined, size: 30, color: Colors.grey, weight: 3), // 未选中状态,weight调整线条粗细 )
内容的提问来源于stack exchange,提问作者Khalid
相关产品推荐
相关产品推荐

