Flutter在Row中使用单选组件Radio

描述

最近使用flutter遇到了一些问题，包括横向使用RadioListTile时使用Row横向布局时运行报错；修改之后又遇到了选择对应选项无法刷新界面；组件图标与文本之间距离太长等问题。网上找了些资料汇总了一下，下面把代码贴出来作下记录，顺便供需要的同学也做下参考。

import 'package:flutter/material.dart';

import 'package:flutter_boost/flutter_boost.dart';

import 'package:private_tool_box/common/color.dart';

import 'package:private_tool_box/pages/function/incometax/widgets/radioListTileCustom.dart';

class RadioItemextends StatelessWidget {

final Stringtitle;

  final boolshowDivider;
//3.RadioListTile无法刷新对应的界面值
  int?selectValue =0;

  final FunctiononSelected;

  RadioItem({

super.key,

    requiredthis.title,

    this.showDivider =false,

    this.selectValue,

    requiredthis.onSelected,

  });

  @override

  Widgetbuild(BuildContext context) {

return Container(

// height: 65,

      decoration:showDivider

          ?const ShapeDecoration(

shape:Border(bottom:BorderSide(color: colorFFEEEEEE)))

:null,

      child:Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

        // mainAxisSize: MainAxisSize.max,

        children: [

Container(

margin:const EdgeInsets.only(right:10),

            child:Text(

title,

              style:const TextStyle(color: colorFF333333, fontSize:14),

            ),

          ),

          const SizedBox(

width:20,

          ),

          _radioBox("全额缴纳", 0),

          _radioBox("部分缴纳", 1),

        ],

      ),

    );

  }

_radioBox(String title, int context) {
//1.RadioListTile如果想横向显示需要外面套一层布局Flexible限制它的长度
return Flexible(

child:RadioListTileCustom(

// contentPadding: const EdgeInsets.all(0.0),

        value: context,

        title:Text(title,

            style:const TextStyle(

fontWeight: FontWeight.normal,

                color: colorFF333333,

                fontSize:14)),

        groupValue:selectValue,

        onChanged: (value) {

selectValue = value;

          onSelected(title, value);

          Logger.log('$title$value');

        },

      ),

    );

  }

}

需注意的地方

1.RadioListTile如果想横向显示需要外面套一层布局Flexible限制它的长度
2.RadioListTile想把内部图标与文本相关的边距去掉需要设置contentPadding: const EdgeInsets.all(0.0),以及设置图标的边距需要重写RadioListTile类，主要设置horizontalTitleGap:0

3.RadioListTile无法刷新对应的界面值，原因有可能你设置的groupValue值的初始化放到了build方法中，每次setState()都会走build方法导致groupValue值一直是默认值。