[英]Flutter / Firebase - How to create a vertical List View which contains horizontal list views
I am trying to create a vertical list view which contains horizontal list views using firebase as the datasource.我正在尝试创建一个垂直列表视图,其中包含使用 firebase 作为数据源的水平列表视图。 I have created the horizontal scroll view which contains my occasions but now need to house that inside a vertical scroll view for different events.我创建了包含我的场合的水平滚动视图,但现在需要将其容纳在垂直滚动视图中以用于不同的事件。
Here is the code for my homepage这是我主页的代码
class HomePageTest extends StatefulWidget {
@override
_HomePageTestState createState() => _HomePageTestState();
}
class _HomePageTestState extends State<HomePageTest> {
final AuthService _auth = AuthService();
@override
Widget build(BuildContext context) {
return StreamProvider<List<GreetingCard>>.value(
value: DatabaseService().cards,
child: Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(80),
child: MainAppBar(
text: 'Pick an occasion...',
),
),
body:
CardList(),
));
}
}
Card list:卡片清单:
class CardList extends StatefulWidget {
@override
_CardListState createState() => _CardListState();
}
class _CardListState extends State<CardList> {
@override
Widget build(BuildContext context) {
final greetingsCards = Provider.of<List<GreetingCard>>(context);
return Container(
height: 200.0,
child: ListView.builder(
itemCount: greetingsCards.length,
itemBuilder: (context, index){
return Column(
children: [
Text(greetingsCards[index].event),
Card(
child: CardTile(greetingCard: greetingsCards[index],)),
],
);
}, scrollDirection: Axis.horizontal),
);
}
}
and finally card tile:最后是卡片:
class CardTile extends StatelessWidget {
final GreetingCard greetingCard;
const CardTile({Key key, this.greetingCard}) : super(key: key);
@override
Widget build(BuildContext context) {
return
Container(
height: 150.0,
width: 80.0,
child: Card(
child: ListTile(
onTap: () => print(greetingCard.ocassion.toString()),
title: Center(child: Text(greetingCard.ocassion)),
),
),
);
}
}
I'm thinking I should create another list view builder similar to the cards list but i'm curious to understand if there is a better way to do this.我想我应该创建另一个类似于卡片列表的列表视图构建器,但我很想知道是否有更好的方法来做到这一点。
Current output:当前 output:
Desired output:所需的 output:
This is all you need!这就是你所需要的!
Inside your vertical listView, you can have another listView having scroll direction set to horizontal,在您的垂直列表视图中,您可以将另一个滚动方向设置为水平的列表视图,
scrollDirection: Axis.horizontal,
You can create a seperate method, so that you don't have to rewrite horizontal listView for every horizontal listView.您可以创建一个单独的方法,这样您就不必为每个水平 listView 重写水平 listView。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.