我有两个列表,一个列表存储汽车的类别(例如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();
}),
)
],
);
}),
这是我要实现的目标:![enter image description here](https://i.sstatic.net/ksmeE.png)
我可以通过上面的代码以某种方式实现此目的,但是在下面的链接中提出了水平可滚动项的另一个问题。
ListView scroll offset issue in flutter。
最佳答案
据我了解您的问题,我认为这可能会解决此问题:
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),
);
},
),
),
],
),
);
}
}
关于flutter - 通过从flutter中的另一个列表中获取引用来过滤列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63325004/