flutter - 通过从flutter中的另一个列表中获取引用来过滤列表

Question

我有两个列表，一个列表存储汽车的类别(例如SUV，轿车，小型货车等)。
第二个列表是存储汽车的所有详细信息，它也包含类别。
我正在使用嵌套的listview，其中第一个listview以Verticle方式显示汽车的类别，并且在其内部，我想以水平的方式显示属于同一类别的汽车的详细信息。
这是代码段:

 ListView.builder(                                         //This is First list with only Category name
                             shrinkWrap: true,
                         scrollDirection: Axis.vertical,
                          itemCount: categoriesOnlyList.length,
                     itemBuilder: (context, index1) {
                           return
                             Column(
                               crossAxisAlignment: CrossAxisAlignment.start,
                               children: [
                                 Padding(
                                   padding: const EdgeInsets.all(8.0),
                                   child: Container(
                                     margin: EdgeInsets.only(left: 20),
                                     child: Text(
                                       categoriesOnlyList[index1].Name,
                                       textAlign: TextAlign.start,
                                       style: TextStyle(color: Colors.white70,
                                           fontWeight: FontWeight.bold,
                                           fontSize: 18),
                                     ),
                                   ),
                                 ),
                       Container(
                                height: 300,
                                decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                             ),
                                child: ListView.builder(             //This the Second List with all details.
                                  shrinkWrap: true,
                                    itemCount: categoryItemList.length,
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder: (context,index){
                                    return categoriesOnlyList[index1].Name==categoryItemList[index].CategoryName
                                          && categoryItemList[index].ID.startsWith("105")?     // Here I'm applying condition
                                      Padding(
                                        padding: const EdgeInsets.all(20.0),
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(categoryItemList[index].Name,style: TextStyle(color: Colors.white70),),
                                        ),
                                      ):Container();
                                }),
                              )

                               ],
                             );

                      }),

这是我要实现的目标:

我可以通过上面的代码以某种方式实现此目的，但是在下面的链接中提出了水平可滚动项的另一个问题。
ListView scroll offset issue in flutter。

Answer 1

据我了解您的问题，我认为这可能会解决此问题:

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  final list = [
    'BMW',
    'Toyota',
    'Testa',
    'Ford',
    'Fiat',
    'BMW',
    'Toyota',
    'Testa',
    'Ford',
    'Fiat'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(title)),
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (_, __) {
            return SizedBox(
              width: double.infinity,
              height: 60,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(list[index]),
                  );
                },
                itemCount: list.length,
              ),
            );
          },
        ));
  }
}

更新(1)

class Car {
  final String company;
  final String category;

  Car(this.company, this.category);
}

void main() {
  var list = [
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
  ];

  Map<String,List<Car>> groupedLists = {};

  list.forEach((car) {
    if (groupedLists['${car.category}'] == null) {
      groupedLists['${car.category}'] = <Car>[];
    }

    groupedLists['${car.category}'].add(car);
  });

  print(groupedLists);
}

结果是:

{
SUV: [Instance of 'Car', Instance of 'Car'], 
SEDAN: [Instance of 'Car']
}

这是显示这些组的完整Flutter代码:

class Car {
  final String company;
  final String category;

  Car(this.company, this.category);
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  final list = [
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
    Car('Toyata', 'SUV'),
    Car('BMW', 'SEDAN'),
    Car('Tesla', 'SUV'),
  ];

  Map<String, List<Car>> groupedLists = {};

  void groupMyList() {
    list.forEach((car) {
      if (groupedLists['${car.category}'] == null) {
        groupedLists['${car.category}'] = <Car>[];
      }

      groupedLists['${car.category}'].add(car);
    });
  }

  @override
  Widget build(BuildContext context) {
    groupMyList();

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: ListView(
        children: [
          for (var entry in groupedLists.entries)
            SizedBox(
              width: double.infinity,
              height: 60,
              child: ListView.builder(
                itemCount: entry.value.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(entry.value[index].company),
                  );
                },
              ),
            ),
        ],
      ),
    );
  }
}