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});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ShoppingCartScreen(),
    );
  }
}

class ShoppingCartScreen extends StatelessWidget {
  const ShoppingCartScreen({super.key});

  @override
  Widget 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);

  @override
  State<ShoppingCartItem> createState() => _ShoppingCartItemState();
}

class _ShoppingCartItemState extends State<ShoppingCartItem> {
  bool isChecked = false;

  @override
  Widget 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});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NewsListScreen(),
    );
  }
}

class NewsListScreen extends StatefulWidget {
  const NewsListScreen({super.key});

  @override
  State<NewsListScreen> createState() => _NewsListScreenState();
}

class _NewsListScreenState extends State<NewsListScreen> {
  List<String> newsList = List.generate(5, (index) => '新闻标题 $index');

  @override
  Widget 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', // 替换为你的新闻图片网络 URL
            onDelete: () {
              // 处理删除事件
              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);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        contentPadding: const EdgeInsets.all(16.0),
        leading: Image.network(
          imageUrl, // 使用网络图片 URL
          width: 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: () {
          // 处理点击事件，例如打开新闻详情页面
          // 这里可以添加你的代码逻辑
        },
      ),
    );
  }
}

效果如下：