【Flutter组件】ListTile 使用详解

最新推荐文章于 2024-05-14 21:42:37 发布

It一zhai男

最新推荐文章于 2024-05-14 21:42:37 发布

阅读量1.3k

点赞数 1

文章标签： flutter 前端 ui

本文链接：https://blog.csdn.net/u013293125/article/details/125488968

版权

本文详细介绍了Flutter中的ListTile组件，包括title、subtitle、dense、leading、trailing、contentPadding、selected、手势识别和enabled等属性的用法，并提供了实际的代码示例。通过设置不同参数，展示了如何创建带有图像、文本和交互的列表项。同时，还演示了ListTile.divideTiles方法用于在列表项间添加分隔符。

摘要由CSDN通过智能技术生成

ListTile参数说明

title

title 参数可以接受任何小部件，但通常是文本小部件

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

在这里插入图片描述

subtitle

副标题是标题下面较小的文本

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

在这里插入图片描述

dense

使文本更小，并将所有内容打包在一起

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

在这里插入图片描述

leading

将图像或图标添加到列表的开头。这通常是一个图标。

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

在这里插入图片描述

ListTile(
  leading: Icon(Icons.home),
  title: Text('House'),
)

在这里插入图片描述

trailing

设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

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

在这里插入图片描述

contentPadding

设置内容边距，默认是 16，但我们在这里设置为 0

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
  contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)

在这里插入图片描述

selected

如果选中列表的 item 项，那么文本和图标的颜色将成为主题的主颜色。

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

在这里插入图片描述

手势识别

ListTile 可以检测用户的点击和长按事件，onTap 为单击，onLongPress 为长按。对于波纹效果是内置的

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

在这里插入图片描述

enabled

通过将 enable 设置为 false，来禁止点击事件

ListTile(
  title: Text('Horse'),
  onTap: () {
    // this will not get called
  },
  enabled: false,
)

在这里插入图片描述

ListTile.divideTiles

静态方法 divideTiles 可以在 titles 之间添加分隔符

ListView(
  children: ListTile.divideTiles(
      context: context,
      tiles: [
        ListTile(
          title: Text('Horse'),
        ),
        ListTile(
          title: Text('Cow'),
        ),
        ListTile(
          title: Text('Camel'),
        ),
        ListTile(
          title: Text('Sheep'),
        ),
        ListTile(
          title: Text('Goat'),
        ),
      ]
  ).toList(),
)

在这里插入图片描述

使用实例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('ListTile guide')),
        body: BodyWidget(),
      ),
    );
  }
}

String horseUrl = 'https://i.stack.imgur.com/Dw6f7.png';
String cowUrl = 'https://i.stack.imgur.com/XPOr3.png';
String camelUrl = 'https://i.stack.imgur.com/YN0m7.png';
String sheepUrl = 'https://i.stack.imgur.com/wKzo8.png';
String goatUrl = 'https://i.stack.imgur.com/Qt4JP.png';

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(horseUrl),
          ),
          title: Text('Horse'),
          subtitle: Text('A strong animal'),
          trailing: Icon(Icons.keyboard_arrow_right),
          onTap: () {
            print('horse');
          },
          selected: true,
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(cowUrl),
          ),
          title: Text('Cow'),
          subtitle: Text('Provider of milk'),
          trailing: Icon(Icons.keyboard_arrow_right),
          onTap: () {
            print('cow');
          },
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(camelUrl),
          ),
          title: Text('Camel'),
          subtitle: Text('Comes with humps'),
          trailing: Icon(Icons.keyboard_arrow_right),
          onTap: () {
            print('camel');
          },
          enabled: false,
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(sheepUrl),
          ),
          title: Text('Sheep'),
          subtitle: Text('Provides wool'),
          trailing: Icon(Icons.keyboard_arrow_right),
          onTap: () {
            print('sheep');
          },
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(goatUrl),
          ),
          title: Text('Goat'),
          subtitle: Text('Some have horns'),
          trailing: Icon(Icons.keyboard_arrow_right),
          onTap: () {
            print('goat');
          },
        ),
      ],
    );
  }
}