如何在 Flutter 中添加 ListTile:带示例的教程

这篇具有很好参考价值的文章主要介绍了如何在 Flutter 中添加 ListTile:带示例的教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大多数时候,您可能会发现自己使用某种预定义格式填充 ListView。您可以使用 Flutter 中称为ListTile小部件的现成小部件来提供帮助,而不是自己使用行、列和容器创建此布局。

在本教程中,我将通过一些实际示例向您展示如何在 Flutter 应用程序中添加 ListTile 小部件。

以下是我们今天要介绍的内容:

  • 什么是 ListTile?

  • ListTile 变体

  • 管理 ListTile 主题

  • 添加分隔符

  • 添加滑动关闭行为

  • 更改 ListTile 高度

  • 定制

什么是 ListTile?

Flutter 中的 ListTile 小部件是一个显示相关信息的 UI 元素。

它遵循 Material Design 的List规范。一个典型的 ListTile 分为三个部分;开始、中心和结束。开始部分包含领先的小部件;中心部分包括标题和副标题;End 部分包含尾随小部件。

主要用于填充ListView、Column、Row等可滚动视图。例如,您可以使用 ListTile 显示待办事项、电子邮件、导航选项等的列表。您还可以通过点击 ListTile 来接收点击事件。

如果您是视觉学习者,请查看此快速视频教程:

添加 ListTile

这是在 ListView 小部件中显示 ListTile 的最少代码:

ListView(
  children: const [
    ListTile(
      leading: Icon(Icons.car_rental),
      title: Text('Car'),
      trailing: Icon(Icons.more_vert),
    ),
    ListTile(
      leading: Icon(Icons.flight),
      title: Text('Flight'),
      trailing: Icon(Icons.more_vert),
    ),
    ListTile(
      leading: Icon(Icons.train),
      title: Text('Train'),
      trailing: Icon(Icons.more_vert),
    )
  ],
)

以下是将代码转换为设计的方式:

当您想使用 ListTile 填充可能来自后端的长列表时,您可以将单个 ListTile 小部件包装在 ListView.Builder 中,并在 ListTile 中显示数据,如以下代码所示:

final List<String> items = List<String>.generate(10000, (i) => '$i');
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: const Color(0xff764abc),
        child: Text(items[index]),
      ),
      title: Text('Item ${items[index]}'),
      subtitle: Text('Item description'),
      trailing: Icon(Icons.more_vert),
    );
  },
)

输出:

ListTile 变体

还有其他类型的 ListTile 允许您对其执行特定操作。

这些是:

  1. CheckboxListTile

  2. RadioListTile

  3. SwitchListTile

CheckboxListTile

CheckboxListTile小部件是 ListTile 和Checkbox小部件的组合。

您可以使用此小部件将任何项目标记为已完成——例如;待办事项。默认情况下,复选框显示在 ListTile 的右侧(对于从左到右的语言)。

以下是添加 CheckboxListTile 小部件的方法:

class Language {
  String name;
  bool isChecked;
  Language(this.name, {this.isChecked = false});
}
// 1.
final List<Language> languages = [Language('English'), Language('French'), Language('German')];
ListView.builder(
  itemCount: languages.length,
  itemBuilder: (context, index) {
    return CheckboxListTile(
      // 2.
      title: Text('${languages[index].name}'),
      // 3.
      value: languages[index].isChecked,
      // 4.
      onChanged: (bool? value) {
        setState(() {
          languages[index].isChecked = value!;
        });
      },
      // 5.
      secondary: const Icon(Icons.language),
    );
  },
)

代码块中的数字解释:

  1. 包含语言列表的变量

  2. 这显示了复选框标签

  3. 这决定了是否选中或取消选中该项目

  4. 当您点击 ListTile 时会调用它

  5. 这是一个领先的图标

输出:

要交换辅助(前导)小部件和复选框,您可以使用该controlAffinity属性并将其设置为ListTileControlAffinity.leading.

您还可以通过添加checkboxShape参数并将其设置为 来更改复选框的形状RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))。

RadioListTile

RadioListTile小部件是ListTile和RadioButton小部件的组合——该小部件用于从项目列表中选择单个选项。

以下是添加 RadioListTile 小部件的方法:

// 1.
enum Gender { male, female }
// 2.
Gender? _gender = Gender.male;
ListView(
  children: [
    // 3.
    RadioListTile<Gender>(
      secondary: Icon(Icons.male),
      controlAffinity: ListTileControlAffinity.trailing,
      title: const Text('Male'),
      // 4.
      value: Gender.male,
      // 5.
      groupValue: _gender,
      // 6.
      onChanged: (Gender? value) {
        setState(() {
          _gender = value;
        });
      },
    ),
    RadioListTile<Gender>(
      secondary: Icon(Icons.female),
      controlAffinity: ListTileControlAffinity.trailing,
      title: const Text('Female'),
      value: Gender.female,
      groupValue: _gender,
      onChanged: (Gender? value) {
        setState(() {
          _gender = value;
        });
      },
    ),
  ],
)

代码块中的数字解释:

  1. 包含RadioListTile的所有选择值的枚举

  2. 这使用枚举保存默认选择

  3. 添加枚举类型的 RadioListTile

  4. 将选择值分配给当前列表图块。ListTile 代表这个值

  5. 这用于显示当前选择的值

  6. 当您切换单选按钮时,它会通过选择调用

输出:

SwitchListTile

SwitchListTile小部件是 ListTile 和Switch小部件的组合。

您可以使用此小部件构建允许用户打开或关闭应用程序设置的 UI 交互。

以下是添加 SwitchListTile 小部件的方法:

class Appliance {
  String name;
  bool isOn;
  Appliance(this.name, {this.isOn = false});
}
// 1.
final List<Appliance> appliances = [
  Appliance('TV'),
  Appliance('Fan'),
  Appliance('Refrigerator'),
];
ListView.builder(
  itemCount: appliances.length,
  itemBuilder: (context, index) {
    return SwitchListTile(
      // 2.
      title: Text('${appliances[index].name}'),
      // 3.
      value: appliances[index].isOn,
      // 4.
      onChanged: (bool value) {
        setState(() {
          appliances[index].isOn = value;
        });
      },
    );
  },
)

代码块中的数字解释:

  1. 包含设备列表的变量

  2. 这显示了 ListTile 的名称或标题

  3. 这决定了是打开还是关闭开关

  4. 这在您切换开关时调用

输出:

管理 ListTile 主题

主题是开发前端应用程序的重要方面。主题传达了您的品牌,如果管理不当,您可能会浪费大量时间让所有 UI 元素都遵循相同的规则。

假设您想要更改 ListTile 的外观以匹配您的设计。你真的有以下两个选择:

  1. 在小部件级别更改主题

  2. 在应用程序级别更改主题

在小部件级别更改主题

您可以通过直接修改其属性(例如颜色、形状和大小)来更改 ListTile 的外观。

以下是更改 ListTile 的背景颜色、文本颜色和图标颜色的方法:

return ListTile(
  // 1.
  tileColor: Colors.redAccent,
  // 2.
  textColor: Colors.white,
  // 3.
  iconColor: Colors.white,
);

代码块中的数字解释:

  1. 这会改变 ListTile 的背景颜色

  2. 这会更改 ListTile 上显示的所有文本的颜色

  3. 这会更改出现在 ListTile 上的所有图标的颜色

在应用程序级别更改主题

您可能希望在所有应用页面中更改 ListTile 小部件的视觉美感。您可以通过定义listTileTheme然后添加ListTileThemeData小部件来做到这一点。


超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →


在ListTileThemeData小部件内部,您可以为项目中的所有 ListTile 小部件指定要更改的所有属性。

这是代码示例:

return MaterialApp(
  title: 'Flutter Demo',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    listTileTheme: ListTileThemeData(
      tileColor: Colors.redAccent,
      textColor: Colors.white,
      iconColor: Colors.white,
    ),
  ),
  home: MyHomePage(),
);

第一种和第二种方法都产生与以下相同的结果:

添加分隔符

添加分隔线可以帮助您清楚地区分项目,尤其是当项目在中心部分以三行显示时。

要在 ListTile 项目之间添加分隔线,请添加ListView小部件。在里面ListView,添加ListTile.divideTiles带有 tiles 属性和 ListTiles 列表。

代码示例:

ListView(
  children: ListTile.divideTiles(context: context, tiles: [
    ListTile(
      leading: Icon(Icons.car_rental),
      title: Text('Car'),
    ),
    ListTile(
      leading: Icon(Icons.flight),
      title: Text('Flight'),
    ),
    ListTile(
      leading: Icon(Icons.train),
      title: Text('Train'),
    ),
  ]).toList(),
)

输出:

如果您使用ListView.Builder,则可以将其替换为ListView.separated并添加separatorBuilder返回分隔符的参数。

代码示例:

ListView.separated( // <-- SEE HERE
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: const Color(0xff764abc),
        child: Text(items[index]),
      ),
      title: Text('Item ${items[index]}'),
      subtitle: Text('Item description'),
      trailing: Icon(Icons.more_vert),
    );
  },
  separatorBuilder: (context, index) { // <-- SEE HERE
    return Divider();
  },
)

输出:

添加滑动关闭行为

滑动关闭功能允许您使用滑动手势从列表中删除特定的 ListTile。例如,您可以使用此功能从列表中删除一封电子邮件。

以下是步骤:

  1. 将您的ListTile小部件包装在Dismissible小部件中

  2. 在 Dismissible 小部件中,添加onDismissed参数并注册回调。在这里,您可以编写从列表中删除项目的逻辑。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible( // Step 1
      key: Key(items[index]),
      onDismissed: (direction) { // Step 2
        setState(() {
          items.removeAt(index);
        });
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('${items[index]} dismissed')));
      },
      child: ListTile(
        //visualDensity: VisualDensity(vertical: 4),
        leading: CircleAvatar(
          backgroundColor: const Color(0xff764abc),
          child: Text(items[index]),
        ),
        title: Text('Item ${items[index]}'),
        subtitle: Text('Item description'),
        trailing: Icon(Icons.more_vert),
      ),
    );
  },
)
)

(注意:以上代码仅从 UI 中删除 ListTile,您必须自己编写业务逻辑才能从数据库中删除该项目)

输出:

更改 ListTile 高度

有时您可能想在一定程度上调整 ListTile 的高度。ListTile 小部件不直接支持 height 属性,因为它的尺寸根据材料设计规范受到限制。畅听FM电台App,免登录免费畅听所有电台节目,无限制使用多地区FM频道!因此,为了增加或减少 ListTile 的高度,您可以使用该visualDensity属性。

将 设置visualDensity为正数将增加 ListTile 高度,而负数将降低高度。

(注意:您可以设置的最大值和最小值是4和-4)

这是代码示例:

ListTile(
  visualDensity: VisualDensity(vertical: 4), //<-- SEE HERE
  leading: CircleAvatar(
    backgroundColor: const Color(0xff764abc),
    child: Text(items[index]),
  ),
  title: Text('Item ${items[index]}'),
  subtitle: Text('Item description'),
  trailing: Icon(Icons.more_vert),
);

输出:

定制

您可以利用可用属性向 ListTile 添加各种自定义项。例如,您可以更改它的颜色(在不同的状态,如悬停、按下等)、形状、在标题和其他元素之间添加空间,以及更改它的高度等。


来自 LogRocket 的更多精彩文章:

  • 不要错过来自 LogRocket 的精选时事通讯The Replay

  • 了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

  • 使用 React 的 useEffect优化应用程序的性能

  • 在多个 Node 版本之间切换

  • 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

  • 探索 Tauri,一个用于构建二进制文件的新框架

  • 比较NestJS 与 Express.js


您可以通过导航到其定义来查看它支持的所有属性。要查看所有属性,只需右键单击,然后转到> Delcation或Usages。

结论

添加 ListTile 小部件可帮助您提高应用程序开发速度。它遵循材料规范,涵盖了有意义地展示项目所需的一切。

在本教程中,我们首先了解了如何添加 ListTile、它的类型以及如何管理主题,并涵盖了一些场景,例如添加分隔线和滑动关闭功能以及更改 ListTile 高度,所有这些都是我希望您在建立下一个列表时会有所帮助。文章来源地址https://www.toymoban.com/news/detail-400576.html

到了这里,关于如何在 Flutter 中添加 ListTile:带示例的教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ubuntu安装mysql5.7(适用于大多数ubuntu版本)

    前言:网上mysql的安装方式参差不齐,有的装了缺少配置文件,有的装了少库少表 所以现在出一个完整的mysql安装方案 装完没有密码,需要自己进去设置密码 装完有默认密码,需要查看并进去在自己修改 安装的时候输入密码,安装完成后直接使用 本文使用的正是第三种 my

    2024年02月16日
    浏览(56)
  • uniapp 地图如何添加?你要的教程来喽!

    地图在 app 中使用还是很广泛的,常见的应用常见有: 1、获取自己的位置,规划路线。 2、使用标记点进行标记多个位置。 3、绘制多边形,使用围墙标记位置等等。 此篇文章就以高德地图为例,以上述三个常见需求为例,教大家如何在 uniapp 中添加地图。 作为一个不管闲事

    2024年02月11日
    浏览(43)
  • java 8 stream流的19种用法,可应对大多数集合的处理场景

    java 8的Stream API是一种非常强大的集合处理工具,它提供了一种新的、高效的、声明式的方式来处理集合数据。下面我们就来看一下Java 8 Stream API的所有用法。 可以使用Stream.of()方法创建一个Stream: 也可以使用集合的stream()方法创建一个Stream: 可以使用filter()方法过滤Stream中的

    2023年04月08日
    浏览(77)
  • (教程)如何在BERT模型中添加自己的词汇(pytorch版)

    来源:投稿 作者:皮皮雷 编辑:学姐 参考文章: NLP | How to add a domain-specific vocabulary (new tokens) to a subword tokenizer already trained like BERT WordPiece | by Pierre Guillou | Medium https://medium.com/@pierre_guillou/nlp-how-to-add-a-domain-specific-vocabulary-new-tokens-to-a-subword-tokenizer-already-trained-33ab15613a41 中文

    2024年02月13日
    浏览(37)
  • 为什么mysql使用的是B+树而nosql类型的数据库大多数使用的是LSM树

    MySQL和LSM Tree(一种基于日志的存储引擎)都是关系型数据库,但它们在数据结构的选择上有所不同。 MySQL使用B+树作为其默认的索引结构,因为B+树在某些方面比LSM树更适合作为默认的索引结构。B+树的查询和更新速度相对较快,而且它的写入操作通常是基于内存的。这意味着

    2024年02月06日
    浏览(103)
  • 【网络教程】如何创建/添加钉钉机器人以及如何获取机器人的Token/Secret

    这里以PC端的操作为例,按照如下操作进行 访问 钉钉开放平台 选择 机器人 选项卡,点击右上角的 创建应用 ,这里会有一个弹窗,我这里选择的是 继续使用旧版 ,如图 按照要求填写相关信息创建自己的机器人,如图 创建成功后,点击创建成功的机器人进入设置界面,如图

    2024年02月12日
    浏览(71)
  • EasyNVR平台ONVIF教程:如何通过ODM工具手动输入onvif地址添加通道?

    EasyNVR属于轻量级的视频监控平台,可拓展性强、兼容度高,可支持RTSP/ONVIF协议接入前端设备。在接入前端设备时,可通过自带的ONVIF探测功能,将摄像头设备接入平台,并能实现云台控制,包括转动、变焦、放大等操作。 在实际使用场景中,因受到网络环境因素影响,在E

    2023年04月08日
    浏览(41)
  • R语言【base】——data.frame():创建数据框,紧耦合的变量集合,它们共享矩阵和列表的许多属性,被大多数R建模软件用作基本数据结构。

    Package  base  version 4.2.0 创建数据框(data frame),紧耦合的变量集合,它们共享矩阵和列表的许多属性,被大多数R建模软件用作基本数据结构。 数据框:一种在统计分析和数据处理中常用的数据结构,由行和列组成,类似于电子表格。 参数【...】:这些参数的形式是 value 或

    2024年02月21日
    浏览(50)
  • Flutter 添加 example流程

    一、已有Flutter工程(命令)添加 example 1、cd 工程(flutter_plugin ,是自己创建的)根目录       例: flutter create example  执行命令创建example PS:cd example 后执行flutter doctor 后就可以看到效果 2、如果需要指定iOS/Android 语言,请添加 \\\"-i  / -a\\\" 参数      例: flutter create -i objc -a kotlin

    2024年02月15日
    浏览(42)
  • Flutter中添加资源文件

    在Flutter中,需要在根目录下的 pubspec.yaml 文件中配置资源的路径,资源才能被打包使用。 1.1 添加本地图片资源 注意缩进!本地文件夹内的资源可以选择导入整个文件夹,或者只导入指定文。 使用: Image.asset(\\\"assets/images/mine.png\\\") 1.2 添加依赖插件图片资源 1. 添加依赖插件 在

    2024年02月12日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包