ListTile 组件表示一个包含一到三行文本的列表项，它可以选择带有图标或其它组件。

需要特别说明的是，虽然 ListTile 经常与 ListView 一起使用，但它并不仅限于 ListView。实际上，可以在许多其他布局中使用 ListTile，以创建各种不同的用户界面元素。例如，可以将 ListTile 放置在 Column、Row、Card 等其他布局中，以创建自定义的列表项或卡片。

ListTile 组件有以下常用属性：

1. 前导部分（leading）：通常是显示在 ListTile 左侧的部分，可以是一个图标（Icon）、缩略图（Image）或其他前导元素。

2. 主标题（title）：通常是 ListTile 的主要文本内容，显示在前导部分（如果有的话）的右侧，用于描述列表项的主要信息。

3. 副标题（subtitle）：可选项，显示在主标题下面，用于显示列表项的附加信息或次要信息。

4. 尾部部分（trailing）：通常是显示在 ListTile 右侧的部分，可以是一个图标（Icon）、按钮或其他尾部元素。

这些是 ListTile 的基本组成部分，可以根据需要自定义和组合这些元素，以创建符合你设计需求的列表项。

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return const MaterialApp(home: ShoppingCartScreen(),);}
}class ShoppingCartScreen extends StatelessWidget {const ShoppingCartScreen({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('购物车'),),body: ListView.builder(itemCount: 9,itemBuilder: (context, index) {return ShoppingCartItem(productName: '商品$index',productDescription: '商品$index的一些描述',productQuantity: 1, // 产品数量productImageUrl:'https://gw.alicdn.com/bao/uploaded/i4/1711217080/O1CN018eotkR22Ah1q4eDcs_!!1711217080.jpg_300x300q90.jpg', // 替换为你的网络图片 URL);},),);}
}class ShoppingCartItem extends StatefulWidget {final String productName;final String productDescription;final int productQuantity;final String productImageUrl;const ShoppingCartItem({Key? key,required this.productName,required this.productDescription,required this.productQuantity,required this.productImageUrl,}) : super(key: key);@overrideState<ShoppingCartItem> createState() => _ShoppingCartItemState();
}class _ShoppingCartItemState extends State<ShoppingCartItem> {bool isChecked = false;@overrideWidget build(BuildContext context) {return Card(child: ListTile(leading: Checkbox(value: isChecked,onChanged: (value) {setState(() {isChecked = value!;});},),title: Text(widget.productName),subtitle: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text(widget.productDescription),Text('数量：${widget.productQuantity}'),],),trailing: Image.network(widget.productImageUrl,width: 50,height: 50,fit: BoxFit.cover,),),);}
}

效果如下：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return const MaterialApp(home: NewsListScreen(),);}
}class NewsListScreen extends StatefulWidget {const NewsListScreen({super.key});@overrideState<NewsListScreen> createState() => _NewsListScreenState();
}class _NewsListScreenState extends State<NewsListScreen> {List<String> newsList = List.generate(5, (index) => '新闻标题 $index');@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('新闻列表'), // 设置页面标题),body: ListView.builder(itemCount: newsList.length, // 使用列表的长度itemBuilder: (context, index) {return NewsListItem(headline: newsList[index], // 新闻标题description: '新闻描述 $index', // 新闻描述imageUrl:'https://pics6.baidu.com/feed/5ab5c9ea15ce36d3733d7035255cf48be950b132.jpeg@f_auto?token=29586d3d429228d0a2c251be0f9a8a67', // 替换为你的新闻图片网络 URLonDelete: () {// 处理删除事件setState(() {newsList.removeAt(index); // 移除对应索引的新闻标题});},);},),);}
}class NewsListItem extends StatelessWidget {final String headline;final String description;final String imageUrl;final VoidCallback onDelete;const NewsListItem({Key? key,required this.headline,required this.description,required this.imageUrl,required this.onDelete,}) : super(key: key);@overrideWidget build(BuildContext context) {return Card(child: ListTile(contentPadding: const EdgeInsets.all(16.0),leading: Image.network(imageUrl, // 使用网络图片 URLwidth: 80,height: 80,fit: BoxFit.cover,),title: Text(headline,style: const TextStyle(fontWeight: FontWeight.bold),),subtitle: Text(description),trailing: IconButton(icon: const Icon(Icons.delete),onPressed: onDelete, // 触发删除操作),onTap: () {// 处理点击事件，例如打开新闻详情页面// 这里可以添加你的代码逻辑},),);}
}

效果如下：

import 'package:flutter/material.dart';void main() {runApp(const FileExplorerApp());
}class FileExplorerApp extends StatelessWidget {const FileExplorerApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('文件资源管理器'),),body: const FileExplorerUI(),),);}
}class FileExplorerUI extends StatefulWidget {const FileExplorerUI({super.key});@overrideState<FileExplorerUI> createState() => _FileExplorerUIState();
}class _FileExplorerUIState extends State<FileExplorerUI> {SortMode _sortMode = SortMode.name;@overrideWidget build(BuildContext context) {return Column(crossAxisAlignment: CrossAxisAlignment.stretch,children: [Row(mainAxisAlignment: MainAxisAlignment.end,children: [IconButton(icon: const Icon(Icons.view_list),onPressed: () {setState(() {});},),IconButton(icon: const Icon(Icons.view_module),onPressed: () {setState(() {});},),IconButton(icon: const Icon(Icons.view_headline),onPressed: () {setState(() {});},),DropdownButton<SortMode>(value: _sortMode,onChanged: (value) {setState(() {_sortMode = value!;});},items: SortMode.values.map<DropdownMenuItem<SortMode>>((mode) => DropdownMenuItem(value: mode,child: Text(mode.toString().split('.').last),),).toList(),),],),Expanded(child: ListView.builder(itemCount: 10, // 虚拟数据，实际根据文件列表长度设置itemBuilder: (context, index) {return ListTile(leading: const Icon(Icons.folder), // 根据文件类型设置图标title: Text('文件或文件夹 $index'), // 根据文件名称设置subtitle: const Text('文件大小: 1 KB'), // 根据文件大小设置trailing: const Text('修改日期: 2023-01-01'), // 根据修改日期设置);},),),],);}
}enum ViewMode { details, largeIcon, smallIcon }enum SortMode { name, size, type, date }

效果如图所示：