flutter裏有自帶的radioListTile,但是需求對ui對要求不一樣,導致只能直接封裝一個。
大概是這樣的效果,爲了避免不必要的麻煩,我把文字隱藏了。
我的json是以下格式的
List list =[
{
"content": "content1111",
"reasonId":0,
},
{
"content": "content2222",
"reasonId":1,
},
{
"content": "content3333",
"reasonId":2,
},
];
定義了全局變量 int itemChecked;
裏面是當前選擇的itemChecked。
(list ?? []).forEach((item) {
this.itemChecked = (item?.checked ?? false) ? item.reasonId : this.itemChecked;
ListWidgetItem(
content: item.content ?? "",
value: item.reasonId ?? false,
itemChecked: this.itemChecked,
onChanged: (value) {
if (this.itemChecked != item.reasonId) {
setState(() {
this.itemChecked = item.reasonId;
});
}
},
));
};
class ListWidgetItem extends StatefulWidget {
int value;
String content = "";
int itemChecked;
Function(int) onChanged;
ListWidgetItem({Key key, @required this.value, @required this.content,@required this.itemChecked,@required this.onChanged}) : super(key: key);
@override
_ListWidgetItemState createState() => _ListWidgetItemState();
}
class _ListWidgetItemState extends State<ListWidgetItem> {
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
widget.onChanged(widget.itemChecked);
},
child: Container(
height: 44,
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Container(
width: 3,
height: 3,
decoration: new BoxDecoration(
color: Color.gray,
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 5, right: 45),
child: Text(
widget.content,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14, color: HitchColor.gray_666666),
),
),
),
widget.value == widget.itemChecked
? Image.asset("(點擊後的圖片)", width: 15, height: 15)
: Image.asset("(未點擊的圖片)",width: 15, height: 15)
],
),
));
}
}