Flutter / Firebase - 如何创建包含水平列表视图的垂直列表视图答案

【问题标题】：Flutter / Firebase - How to create a vertical List View which contains horizontal list viewsFlutter / Firebase - 如何创建包含水平列表视图的垂直列表视图
【发布时间】：2020-08-17 19:44:55
【问题描述】：

我正在尝试创建一个垂直列表视图，其中包含使用 firebase 作为数据源的水平列表视图。我创建了包含我的场合的水平滚动视图，但现在需要将其容纳在垂直滚动视图中以用于不同的事件。

这是我主页的代码

  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(),

      ));
}
  }

卡牌列表：

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),
    );
  }
}

最后是卡片：

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)),
          ),
        ),
      );
  }
}

我想我应该创建另一个类似于卡片列表的列表视图构建器，但我很想知道是否有更好的方法来做到这一点。

当前输出：

期望的输出：

【问题讨论】：

标签： firebase flutter dart

【解决方案1】：

这就是你所需要的！

在您的垂直 listView 中，您可以将另一个 listView 的滚动方向设置为水平，

scrollDirection: Axis.horizontal,

您可以创建一个单独的方法，这样您就不必为每个水平 listView 重写水平 listView。

【讨论】：