Flutter分类列表开发问题咨询：数据填充、切换及间距调整

1. 解决ListView.builder项内容重复的问题 #

先定义数据模型类，把每个列表项需要的图片、标题、描述等字段封装起来：

class ArtItem {
  final String imageUrl;
  final String title;
  final String description;

  ArtItem({required this.imageUrl, required this.title, required this.description});
}

接着创建包含不同数据的列表集合：

final List<ArtItem> paintingItems = [
  ArtItem(
    imageUrl: 'assets/painting1.jpg',
    title: '油画《日出》',
    description: '莫奈经典作品'
  ),
  ArtItem(
    imageUrl: 'assets/painting2.jpg',
    title: '油画《星空》',
    description: '梵高代表作'
  ),
  ArtItem(
    imageUrl: 'assets/painting3.jpg',
    title: '油画《蒙娜丽莎》',
    description: '达芬奇传世之作'
  ),
];

最后在ListView.builder中根据索引取对应数据渲染：

ListView.builder(
  itemCount: paintingItems.length,
  itemBuilder: (context, index) {
    final item = paintingItems[index];
    return ListTile(
      leading: Image.asset(item.imageUrl),
      title: Text(item.title),
      subtitle: Text(item.description),
    );
  },
)

2. 实现分类切换对应专属列表的功能 #

1. 在State类中维护选中分类的状态，同时用Map存储各分类对应的数据源：

String _selectedCategory = 'Painting';
final Map<String, List<ArtItem>> _categoryData = {
  'Painting': paintingItems,
  'Drawing': [
    ArtItem(
      imageUrl: 'assets/drawing1.jpg',
      title: '素描《人体》',
      description: '写实风格素描'
    ),
    // 补充更多手绘类数据
  ],
};

2. 给顶部分类卡片添加点击事件，更新选中状态：

GestureDetector(
  onTap: () {
    setState(() {
      _selectedCategory = 'Painting';
    });
  },
  child: Card(child: Text('Painting')),
)

3. 列表部分根据当前选中的分类获取对应数据源：

ListView.builder(
  itemCount: _categoryData[_selectedCategory]!.length,
  itemBuilder: (context, index) {
    final item = _categoryData[_selectedCategory]![index];
    return ListTile(
      leading: Image.asset(item.imageUrl),
      title: Text(item.title),
      subtitle: Text(item.description),
    );
  },
)

3. 缩小分类卡片与列表的间距 #

从这几个方向调整：

• 检查分类卡片和列表所在的Column，删除其中不必要的SizedBox(height: xx)组件；
• 调整ListView的顶部内边距，设置为更小的值：

ListView.builder(
  padding: EdgeInsets.only(top: 8.0), // 替换默认的顶部padding
  // 其他参数不变
)

• 检查分类卡片的底部margin，减小或移除多余间距：

Card(
  margin: EdgeInsets.only(bottom: 8.0), // 缩小卡片底部间距
  child: Text('Painting'),
)

• 若用SingleChildScrollView包裹Column，确保Column的mainAxisAlignment未设置spaceBetween这类分散布局属性。

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