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

如何调整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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.01 00:26:00