Flutter - 列表项 widget

Flutter 很温馨，针对高频出现的列表项 item 提供了响应的 widget，包括各种输入控件，左右两边带图的单行控件，具体包括：

• ListTile
• CheckboxListTile / RadioListTile
• SwitchListTile

ListTile

ListTile 这个 widget 是针对常见的 listview item 需求推出的，其样式是左右两边带图片，中间可以自由设置 widget，不过一般都是 text，可以给 item 整体设置点击

样子一般就是这样：

详细属性：

• title - 中间的 widget，一般都是 text，也可以自由设置任何的 widget

ListTile(
  title: Text('Horse'),
)

• subtitle - title 下面的小字，灰色的部分

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
)

• dense - true 时是小字模式，详细的看图对比

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
  dense: true,
)

• leading - 左边的图标

ListTile(
  leading: CircleAvatar(
    backgroundImage: NetworkImage(imageUrl),
  ),
  title: Text('Horse'),
)

• trailing - 右边的图标

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
)

• contentPadding - 默认情况下边距是 16，有需求的话我们通过这个参数设置 padding
• selected - item 选中，暂时不知道怎么该颜色，这里的颜色应该是按系统主题色走的

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
  selected: true,
)

• enabled - item 劲用，默认是灰色的

  

• 点击事件

ListTile(
  title: Text('Horse'),
  onTap: () {
    // do something
  },
  onLongPress: (){
    // do something else
  },
)

CheckboxListTile

列表 item 专用的多选按钮组件，样式这样的，提供左边时图标，右边是选择框，两者也可以对调

说一下主要属性设置，基本的部分和 Checkbox 是一样的，其他的属性和别的组件用的一样，大家看看就都知道了

• value - 不解释，都知道，不想说
• onChanged - 同上
• title - 标题
• subtitle - 副标题，在 title 下面，两着不在一行
• isThreeLine - true 时，整体呈现居中效果
• secondary - 左边的控件，一般都是图
• dense - true 时文字小
• controlAffinity - 图和选择框的位置
  • ListTileControlAffinity.platform - 根据不同的平台，来显示 对话框 的位置
  • ListTileControlAffinity.trailing - 图在左边，选择框在右边
  • ListTileControlAffinity.leading - 图在右边，选择框在左边

class TestWidgetState extends State<TestWidget> {
  var isCan = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("我是头部"),
        Expanded(
          child: ListView(
            children: <Widget>[
              CheckboxListTile(
                onChanged: (isCheck) {
                  print("is:${isCheck}");
                  setState(() {
                    isCan = isCheck;
                  });
                },
                value: isCan,
                title: Text("这是标题"),
                subtitle: Text("这是内容"),
                secondary: Icon(Icons.camera),
                isThreeLine: true,
                controlAffinity: ListTileControlAffinity.leading,
              ),
            ],
          ),
        ),
      ],
    );
  }

最后说一下，CheckboxListTile 和 RadioListTile 他俩得设置属性是一模一样得

SwitchListTile

SwitchListTile 和 CheckboxListTile / RadioListTile 一样，在原有我 widget 得基础上加上了 title、subtitle、secondary、controlAffinity 标题，副标题，左边控件和控件位置这几个属性，详细得不用写了，看上面的那个就行了