Flutter使用ListView时报错类型'Type'未定义运算符'[]'如何解决

报错原因 #

你代码中itemBuilder里写的int[index]是错误写法：

• int是Dart内置的整数类型，不是可按下标取值的列表对象，自然不存在[]运算符，所以触发了你遇到的类型错误。
• 你定义的存储卡片数据源的列表变量名为items，需要从这个列表中按索引取值传递给buildCard方法。

修复方案 #

1. 把buildCard(item: int[index])改成buildCard(item: items[index])
2. 补充两个优化点：
   • ListView.separated默认是垂直滚动，要实现横向滚动需要添加scrollDirection: Axis.horizontal参数
   • itemCount不要写死为3，改为items.length，后续增减卡片数据不用同步修改这个值

修复后完整代码 #

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class CardItem {
  final String assetImage;
  final String title;

  const CardItem({
    required this.assetImage,
    required this.title,
  });
}

class _HomePageState extends State<HomePage> {
  List<CardItem> items = [
    CardItem(title: 'Card1', assetImage: 'images/movie/01.webp'),
    CardItem(title: 'Card2', assetImage: 'images/movie/02.png'),
    CardItem(title: 'Card3', assetImage: 'images/movie/03.png'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            margin: const EdgeInsets.symmetric(vertical: 20.0),
            height: 250,
            child: ListView.separated(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => buildCard(item: items[index]),
                separatorBuilder: (context, _) => SizedBox(width: 12),
                itemCount: items.length)));
  }

  Widget buildCard({
    required CardItem item,
  }) =>
      Container(
          width: 170,
          color: Colors.red,
          child: Column(
            children: [
              Expanded(
                child: Image(
                  image: AssetImage(item.assetImage),
                  fit: BoxFit.cover,
                ),
              )
            ],
          ));
}

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