Flutter提供的一个通用列表条目结构，为中右结构，尾部是一个Radio。相应位置可插入组件，可以很方便地应对特定的条目。

相关组件

Radio

RadioListTile需要一个泛型T

【value】 : 条目对象 【T】
【groupValue】 : 选中对象 【T】
【selected】: 是否选中 【bool】
【secondary】: 右侧组件 【Widget】
【title】: 中间上组件 【Widget】
【subtitle】: 中间下组件 【Widget】
【onChanged】: 切换事件 【Function(T)】
36.gif

  1. import 'package:flutter/material.dart';
  2. class ItemBean {
  3.   final String title;
  4.   final String subTitle;
  5.   final String imgUrl;
  7.   ItemBean(this.title, this.subTitle, this.imgUrl);
  8. }
  10. class CustomRadioListTile extends StatefulWidget {
  11.   @override
  12.   _CustomRadioListTileState createState() => _CustomRadioListTileState();
  13. }
  15. class _CustomRadioListTileState extends State<CustomRadioListTile> {
  16.   final Map<ItemType, ItemBean> languages = {
  17.     ItemType.java:
  18.     ItemBean("Java", "曾经世界上最流行的语言", "assets/images/java.jpeg"),
  19.     ItemType.kotlin:
  20.     ItemBean("Kotlin", "未来世界上最流行的语言", "assets/images/kotlin.jpg"),
  21.     ItemType.dart:
  22.     ItemBean("Dart", "世界上最优雅的语言", "assets/images/dart.jpg"),
  23.   };
  24.   var _type = ItemType.java;
  26.   @override
  27.   Widget build(BuildContext context) {
  28.     return Container(
  29.       color: Colors.grey.withAlpha(11),
  30.       child: Column(
  31.           mainAxisSize: MainAxisSize.min,
  32.           children: languages.keys
  33.               .map((type) => RadioListTile<ItemType>(
  34.             value: type,
  35.             groupValue: _type,
  36.             title: Text(languages[type].title),
  37.             subtitle: Text(languages[type].subTitle),
  38.             selected: _type == type,
  39.             secondary: CircleAvatar(
  40.               backgroundImage: AssetImage(languages[type].imgUrl),
  41.             ),
  42.             onChanged: (type) => setState(() => _type = type),
  43.           ))
  44.               .toList()),
  45.     );
  46.   }
  47. }

RadioListTile选中色和密排

【activeColor】 : 选中时颜色 【Color】
【dense】: 是否密排 【bool】
37.gif

import 'package:flutter/material.dart';
class ItemBean {
  final String title;
  final String subTitle;
  final String imgUrl;

  ItemBean(this.title, this.subTitle, this.imgUrl);
}

class DenseRadioListTile extends StatefulWidget {
  @override
  _DenseRadioListTileState createState() => _DenseRadioListTileState();
}

class _DenseRadioListTileState extends State<DenseRadioListTile> {
  final Map<ItemType, ItemBean> languages = {
    ItemType.java:
    ItemBean("Java", "曾经世界上最流行的语言", "assets/images/java.jpeg"),
    ItemType.kotlin:
    ItemBean("Kotlin", "未来世界上最流行的语言", "assets/images/kotlin.jpg"),
    ItemType.dart:
    ItemBean("Dart", "世界上最优雅的语言", "assets/images/dart.jpg"),
  };
  var _type = ItemType.java;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(11),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          children: languages.keys
              .map((type) => RadioListTile<ItemType>(
            value: type,
            groupValue: _type,
            title: Text(languages[type].title),
            activeColor: Colors.orangeAccent,
            dense: true,
            subtitle: Text(languages[type].subTitle),
            selected: _type == type,
            secondary: CircleAvatar(
              backgroundImage: AssetImage(languages[type].imgUrl),
            ),
            onChanged: (type) => setState(() => _type = type),
          ))
              .toList()),
    );
  }
}