Flutter - 在 Sliver List 中实现横向滚动的 Sliver Layout

Question

我试图在Sliver List（CustomScrollview - SliverList）中创建可水平滚动的列表。

以下是我的代码：

import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
    body: CustomScrollView(
        slivers: <Widget>[
        DetailAppBar(),
        SliverPadding(
          padding: EdgeInsets.all(16.0),
          sliver: SliverList(
            delegate: SliverChildListDelegate(
              [
                Card(child: Text('data'),),
                Card(child: Text('data'),),
                Card(child: Text('data'),),
                Card(child: Text('data'),),

                // Scrollable horizontal widget here
              ],
            ),
          ),
        ),
      ],
    ),
    bottomNavigationBar: NavigationButton());


 }

}

你能给我这个案例提供一个例子或解决方案吗？我真的需要一些帮助。

- Dion Fananie

---

将滚动方向改为水平方向。即 scrollDirection: Axis.horizontal, - Vamsi Krishna

不，我的意思是仅使“// Scrollable horizontal widget here”中的部件可滚动。但是您的解决方案会使所有部件从上到下水平滚动。 - Dion Fananie

Answer 1

在SliverToBoxAdapter内使用ListView。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: EdgeInsets.all(16.0),
            sliver: SliverList(
              delegate: SliverChildListDelegate(
                [
                  Card(
                    child: Text('data'),
                  ),
                  Card(
                    child: Text('data'),
                  ),
                  Card(
                    child: Text('data'),
                  ),
                  Card(
                    child: Text('data'),
                  ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 100.0,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Container(
                    width: 100.0,
                    child: Card(
                      child: Text('data'),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

- Albert Lardizabal

---

如何使ListView高度自适应而无需指定容器的高度？ - Zarul Izham

你无法这样做是因为列表视图的工作方式。它们试图占用尽可能多的空间，并且无法从另一个列表视图获取大小。你可以做的是计算你的项目的高度并相应地设置列表视图的高度。 - Christian X

@ChristianX：你如何计算项目的高度？我的意思是，你是指硬编码它们吗？还是有一种方法可以获取小部件的高度？ - user5381191

Answer 2

对我而言，另一种解决方案无法使用，因为当我使用 ListView 时会出错。

这是我编写的一个名为 HorizontalSliverList 的类，它可以轻松地完成任务。

以下是您需要复制的类：

class HorizontalSliverList extends StatelessWidget {
  final List<Widget> children;
  final EdgeInsets listPadding;
  final Widget divider;

  const HorizontalSliverList({
    Key key,
    @required this.children,
    this.listPadding = const EdgeInsets.all(8),
    this.divider,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Padding(
          padding: listPadding,
          child: Row(children: [
            for (var i = 0; i < children.length; i++) ...[
              children[i],
              if (i != children.length - 1) addDivider(),
            ],
          ]),
        ),
      ),
    );
  }

  Widget addDivider() => divider ?? Padding(padding: const EdgeInsets.symmetric(horizontal: 8));
}

- alireza easazade

---

随着列表中的项目数量增加，您将遇到性能问题。使用最多5个项目可能还可以接受。 - khamidjon