Flutter之ListTile

在Flutter开发中，ListTile是最常用的组件之一，首先我们来看一下它的属性以及使用方法。

一.属性列表

  const ListTile({
    Key key, 
    this.leading, //title之前的widget
    this.title, //列表块的主要内容
    this.subtitle, //title下方显示的内容
    this.trailing, //标题后显示的widget，通常是一个[Icon]widget
    this.isThreeLine = false, //是否打算显示三行文本
    this.dense, //此列表图块是否是垂直密集列表的一部分，如果是true文本将会更小
    this.visualDensity, 
    this.shape,
    this.contentPadding, //内容与边框之间的边距，默认是16
    this.enabled = true, //列表块是否可交互
    this.onTap, //当用户点击此列表图块时调用
    this.onLongPress, //当用户长按此列表图块时调用
    this.mouseCursor,
    this.selected = false, //如果选中列表块，文本和图标的颜色将成为主题的主颜色
    this.focusColor,
    this.hoverColor,
    this.focusNode,
    this.autofocus = false,
  })

根据上面的源码，我们可以尝试自己应用一下各个属性。

二.实例

 上图的源代码如下（仅截取使用到ListTile的部分）

Expanded(
          child: ListView(//列表视图
            children: <Widget>[
              ListTile(  //列表块
                leading: const Icon(
                  Icons.article_outlined,
                  color: Colors.pinkAccent,
                  size: 30,
                ),
                trailing: const Icon(Icons.arrow_forward_ios),
                title: const Text(
                    '账号管理',
                  style: TextStyle(
                    fontSize: 20,
                    fontFamily: "YouYuan",
                  ),
                ),
                onTap: (){},
              ),
              ListTile(
                leading: const Icon(
                    Icons.account_circle_outlined,
                  color: Colors.pinkAccent,
                  size: 30,
                ),
                trailing: const Icon(Icons.arrow_forward_ios),
                title: const Text(
                    '个人信息',
                style: TextStyle(
                  fontSize: 20,
                  fontFamily: "YouYuan",
                  ),
                ),
                onTap: (){},
              ),
              ListTile(
                leading: const Icon(
                  Icons.add_moderator_outlined,
                  color: Colors.pinkAccent,
                  size: 30,
                ),
                trailing: const Icon(Icons.arrow_forward_ios),
                title:const Text(
                    '账号安全',
                  style: TextStyle(
                    fontSize: 20,
                    fontFamily: "YouYuan",
                  ),
                ),
                onTap: (){},
              ),
            ],
          ),
        ),