描述
最近使用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
image.png
3.RadioListTile无法刷新对应的界面值，原因有可能你设置的groupValue值的初始化放到了build方法中，每次setState()都会走build方法导致groupValue值一直是默认值。
