如何在 flutter 中制作横向滚动条

Question

目前我正在从我的后端数据库中显示我的数据（屏幕截图），但我只是想知道如何修改它以便它一次只在屏幕上显示一张卡片并且能够水平滚动。

我尝试使用 ListView 更改包装并添加scrollDirection: Axis.horizontal ，但我收到此错误是有原因的。

任何帮助或建议将不胜感激。

Exception has occurred.
FlutterError (RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

detailposts.value.length > 0
? Container(
    child: Expanded(
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          ...detailposts.value
              .asMap()
              .entries
              .map((post) => FAQCard(
                  background: post.key % 2 == 0
                      ? (color.state == 'dark'
                          ? eachPostBgDark
                          : eachPostBg)
                      : (color.state == 'dark'
                          ? eachPostBgLowDark
                          : eachPostBgLow),
                  post: post.value))
              .toList(),
          loadingMore.value
              ? Container(
                  margin: EdgeInsets.only(top: 10, bottom: 20),
                  child: SpinKitRotatingCircle(
                    color: colorPrimary,
                    size: 30.0,
                  ),
                )
              : SizedBox()
        ],
      ),
    ),
  )
: Container(),

自卫队

Answer 1

如果你想一次只显示一张卡片并且同时可以滚动，那么你应该使用page view 。

Answer 2

正如文档所说：

Expanded 小部件必须是 Row、Column 或 Flex 的后代，并且从 Expanded 小部件到其封闭的 Row、Column 或 Flex 的路径必须仅包含 StatelessWidgets 或 StatefulWidgets（不能包含其他类型的小部件，如 RenderObjectWidgets）

Expanded 有错误的父窗口小部件，请尝试将展开的包装在一行中。

Answer 3

包装在Container中，高度设置为 card 的高度 + 15px 的阴影和宽度为MediaQuery.of(context).size.width 。 容器的子container是SingleChildScrollView() -> (1**)-> ListView或ListView.builder

如果下面的代码出错，请将 1** 替换为Row()

? Container(
      height: 250,  ///assumed
      width: MediaQuery.of(context).size.width,  ///width of the screen
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
        child: ListView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            ///your items
          ],
        )
        ),
      ), 
: Container()