Flutter中ListTile列表块的使用详解

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的主要常用属性已经标注了注释,感兴趣的可以针对每个属性,一个一个调试一下。

实例

实例一:ListTile列表

接下来使用实例进行代码实战:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return new ListTile(
            leading: new Icon(Icons.phone),
            title: new Text("卜大爷 $index"),
            subtitle: new Text("010-12345678"),
            trailing: new Icon(Icons.arrow_forward_ios),
            contentPadding: EdgeInsets.symmetric(horizontal: 20.0),
            enabled: true,
            onTap: () => print("$index被点击了"),
            onLongPress: () => print("$index被长按了"),
          );
        },
      ),
    );
  }
}

效果图:

实例二:卡片形式的列表

只需要在ListTile外面添加一层Card组件即可:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return new Card(
              child: new ListTile(
            leading: new Icon(Icons.phone),
            title: new Text("卜大爷 $index"),
            subtitle: new Text("010-12345678"),
            trailing: new Icon(Icons.arrow_forward_ios),
            contentPadding: EdgeInsets.symmetric(horizontal: 20.0),
            enabled: true,
            onTap: () => print("$index被点击了"),
            onLongPress: () => print("$index被长按了"),
          ));
        },
      ),
    );
  }
}

效果图:

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卜大爷

觉得不错的可以给我加油哦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值