Flutter实现列表分组带标题：按isHookup区分当前/历史拖车

原代码核心问题 #

• 未校验首个元素的isHookup属性值，直接固定展示「Current Trailer」标题，完全不符合需求逻辑
• 「Past Trailers」标题在剩余元素为空时仍会显示，导致无意义的空标题
• 列表分组逻辑混乱，没有根据条件动态拆分元素组

修复实现思路 #

1. 先判断列表是否为空，避免空指针异常
2. 针对首个元素的isHookup状态做分支处理：
   • 若为true，单独展示该元素并添加「Current Trailer」标题；剩余元素数量>0时，再添加「Past Trailers」标题并展示剩余元素
   • 若为false，直接展示所有元素，不添加特殊标题
3. 仅当有对应元素时才显示对应标题，避免无效标题

修复后代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Trailer Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Trailer List')),
        body: const TrailerList(),
      ),
    );
  }
}

class Trailer {
  final String name;
  final bool isHookup;

  Trailer(this.name, this.isHookup);
}

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

  final List<Trailer> trailers = const [
    Trailer('Current Hookup', true),
    Trailer('Past Trailer 1', false),
    Trailer('Past Trailer 2', false),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(16),
      children: [
        if (trailers.isNotEmpty)
          trailers.first.isHookup
              ? ...[
                  const Text(
                    'Current Trailer',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  ListTile(title: Text(trailers.first.name)),
                  const SizedBox(height: 16),
                  if (trailers.length > 1) ...[
                    const Text(
                      'Past Trailers',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 8),
                    ...trailers.skip(1).map((trailer) => ListTile(title: Text(trailer.name))),
                  ]
                ]
              : ...trailers.map((trailer) => ListTile(title: Text(trailer.name))),
      ],
    );
  }
}

关键优化点 #

• 使用...展开运算符简化列表子元素拼接，代码更简洁易读
• 增加空列表判断，避免空指针报错
• 仅当有对应元素时才显示对应标题，避免无效UI
• 严格按照isHookup状态动态控制标题与元素的展示逻辑

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