-1

我对颤动很陌生，我不明白如何从这个单个子滚动视图中的 firestore 获取数据这是我使用的代码：

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(children: [
        SizedBox(width: 20),
        appointmentCard(
            'https://randomuser.me/api/portraits/women/3.jpg',
            "Dr. Emerson Dias",
            "Consultant",
            "26th October, 2021",
            "04:30 PM"),
        appointmentCard(
            'https://randomuser.me/api/portraits/women/11.jpg',
            "Dr. Ana Bob",
            "Consultant",
            "04th October, 2021",
            "04:00 PM"),
        appointmentCard(
            'https://randomuser.me/api/portraits/women/10.jpg',
            "Dr. June Martanez",
            "Consultant",
            "14th October, 2021",
            "08:30 AM"),
        appointmentCard(
            'https://randomuser.me/api/portraits/women/9.jpg',
            "Dr. Julia Jew",
            "Consultant",
            "21th October, 2021",
            "04:30 PM"),
      ]))),```


  This is how the app and firestore looks:  https://imgur.com/a/umEuRac .
4

1 回答 1

0

好的，所以你想要一个带有标题/标题的图像列表，它可以滚动 Verticallu，但列表也可以水平滚动？尝试这样的事情。首先，您需要一个带有标题和图像权的图像列表。因此，您需要一个 ListView.Builder（如果您不知道列表中有多少项目，则该 Builder 非常适合从在线数据库中获取数据）并将 scrollDirection 设置为水平并将 shrinkwrap 设置为 true。在构建器内部，您希望将 itemCount 设置为将存在的项目的长度（希望您知道它是如何完成的）并返回一个类 showData（您可以将其命名为任何名称）。注意：您也可以存储图像和获取。

 child: ListView.builder(
    physics: ClampingScrollPhysics(),
     shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemBuilder: (BuildContext context, int index) => ShowData();

创建一个新类 ShowData 并向其中添加 Card，在 card 的子级中添加 Padding（稍后您将使用它来设置空间），然后在 padding 的子级中添加一个列，就像您当前所做的那样。在该列中，您可以添加图像及其标题，您将从数据库中获得 Title + Image，ListView.builder 将一次创建一个。所以每个标题+图像将是一张卡片，第二张卡片将是另一个标题+图像。现在要使其垂直滚动，只需使用 singlechildscrollview 包装卡片（如果卡片不起作用，请尝试使用列）

并且您将拥有一个具有标题和图像并且可以水平滚动的项目列表，如果它下面有更多项目，那么它也可以垂直滚动（仅当它位于屏幕下方时）

您可以从 Flutter 中的 Vertical ScrollView 中的 Here Horizo​​ntal ListView 和这里https://youtu.be/CQt91j_MsUw获得想法

于 2021-09-30T09:51:37.753 回答