如何在Flutter中创建Widget列表并重构ListView的ListTile样板代码

MyApp中使用ListView展示影院和餐厅列表时，多处复用的ListTile逻辑几乎无改动，存在大量重复代码。我们可以通过数据层与视图层分离的思路完成重构，同时把所有文案数据抽离到独立文件维护，优化代码可维护性。

步骤1：创建数据模型与独立数据配置文件 #

新建list_data.dart文件，统一存放列表数据模型和所有业务数据：

/*----------------------list_data.dart----------------------*/
import 'package:flutter/material.dart';

// 列表项通用数据模型
class ListItemData {
  final String title;
  final String subtitle;
  final IconData icon;

  const ListItemData({
    required this.title,
    required this.subtitle,
    required this.icon,
  });
}

// 影院列表数据
const List<ListItemData> theaterList = [
  ListItemData(
    title: '帝国CineArts影院',
    subtitle: '西门户大道85号',
    icon: Icons.theaters,
  ),
  ListItemData(
    title: '卡斯特罗剧院',
    subtitle: '卡斯特罗街429号',
    icon: Icons.theaters,
  ),
  ListItemData(
    title: '阿拉莫DraftHouse影院',
    subtitle: '使命街2550号',
    icon: Icons.theaters,
  ),
  ListItemData(
    title: '罗克西剧院',
    subtitle: '第16街3117号',
    icon: Icons.theaters,
  ),
  ListItemData(
    title: '联合艺术家斯通斯敦双屏影院',
    subtitle: '白金汉路501号',
    icon: Icons.theaters,
  ),
  ListItemData(
    title: 'AMC Metreon 16厅影院',
    subtitle: '第四街135号3000室',
    icon: Icons.theaters,
  ),
];

// 餐厅列表数据
const List<ListItemData> restaurantList = [
  ListItemData(
    title: 'K家小厨',
    subtitle: '蒙特利大道757号',
    icon: Icons.restaurant,
  ),
  ListItemData(
    title: '埃米餐厅',
    subtitle: '海洋大道1923号',
    icon: Icons.restaurant,
  ),
  ListItemData(
    title: '猜亚泰餐厅',
    subtitle: '克莱蒙特大道272号',
    icon: Icons.restaurant,
  ),
  ListItemData(
    title: '拉奇恰餐厅',
    subtitle: '第30街291号',
    icon: Icons.restaurant,
  ),
];

步骤2：重构主页面代码，动态生成列表 #

修改main.dart，引入独立数据文件，通过批量转换的方式生成列表项，消除重复样板代码：

/*----------------------main.dart----------------------*/
import 'package:flutter/material.dart';
import './my_list_tile.dart';
import './list_data.dart'; // 引入独立数据文件

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter布局演示',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter布局演示'),
        ),
        body: ListView(
          // 动态拼接影院列表、分割线、餐厅列表
          children: [
            ...theaterList.map((item) => MyListTile(
              title: item.title,
              subtitle: item.subtitle,
              icon: item.icon,
            )).toList(),
            const Divider(),
            ...restaurantList.map((item) => MyListTile(
              title: item.title,
              subtitle: item.subtitle,
              icon: item.icon,
            )).toList(),
          ],
        ),
      ),
    );
  }
}

重构收益 #

• 所有文案、业务数据统一在list_data.dart维护，后续新增、修改列表内容不需要改动视图层代码
• 彻底消除重复的MyListTile样板代码，后续调整列表渲染逻辑只需要修改转换规则或者MyListTile组件本身即可
• 数据可复用，其他页面需要用到同款影院/餐厅数据可以直接引入使用

内容的提问来源于stack exchange，提问作者user16308846