Flutter笔记 - ListTile组件及其应用

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/133411883

1. 功能描述

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

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

2. 主要属性

ListTile 组件有以下常用属性：

3. ListTile的组成元素

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

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

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

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

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

4. 案例：一个简单的购物车UI

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

效果如下：

5. 案例2：一个新闻列表

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: () {
          // 处理点击事件，例如打开新闻详情页面
          // 这里可以添加你的代码逻辑
        },
      ),
    );
  }
}

效果如下：

6. 案例3：模拟文件资源管理器页面

import 'package:flutter/material.dart';

void main() {
  runApp(const FileExplorerApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('文件资源管理器'),
        ),
        body: const FileExplorerUI(),
      ),
    );
  }
}

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

  @override
  State<FileExplorerUI> createState() => _FileExplorerUIState();
}

class _FileExplorerUIState extends State<FileExplorerUI> {
  SortMode _sortMode = SortMode.name;

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

效果如图所示：

文章来源地址https://www.toymoban.com/news/detail-728851.html

到了这里，关于Flutter笔记 - ListTile组件及其应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！