Flutter：如何在 ListView 中添加滚动指示器答案

【问题标题】：Flutter : How to add scroll indicator in ListViewFlutter：如何在 ListView 中添加滚动指示器
【发布时间】：2019-04-01 12:13:55
【问题描述】：

有没有办法在ListView上显示滚动指示器？

这是我的基本代码：

ListView.builder(
  itemCount: 50,
  itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),
)

【问题讨论】：

可能对你有帮助：stackoverflow.com/questions/49675720/…
你需要确保 ListView 实际上小于它的内容，否则它不会显示滚动条。如果您将 ListView 放入可滚动项中，则不会有滚动条，因为它的大小是无限的。
@GünterZöchbauer 我正在使用 50 个元素，而屏幕上同时只有 10 个可见，所以 ListView 比它的内容小，这就是它滚动的原因，我认为会有一些内置ListView 附带的指示器，但没有类似的东西。
我也期望如此。如果不只是将其包装在滚动条中docs.flutter.io/flutter/material/Scrollbar-class.html
@GünterZöchbauer 成功了。我回答了我自己的问题，如果你愿意，我可以删除它，你可以写它，我会接受并支持它。

标签： flutter listview dart scrollview flutter-widget

【解决方案1】：

感谢Günter Zöchbauer。

您可以将ListView 包裹在Scrollbar 中

Scrollbar(
    child: ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),),
)

【讨论】：

根据我的 Android 知识，我想知道您现在是否没有渲染所有元素并将所有内容都放在滚动条中
如果删除 itemCount: 50，列表将是无限的，默认情况下，滚动不应该在这里
在 500 个项目的列表中，其中 37 个可见，它只呈现 50 个项目（这很好）。
请注意，此解决方案（包含在 Scrollbar 中）适用于任何可滚动小部件（例如 SingleChildScrollView），不仅适用于 ListView。将 isAlwaysShown 参数设置为 true 以便滚动条即使在不滚动时也可见；然而，即使 isAlwaysShown 为真，如果不需要滚动条（因为可滚动内容没有超出其限制），滚动条也不会显示。

【解决方案2】：

你可以实现这个设计器滚动条库：

或

您可以将 ListView 包装在 Scrollbar 小部件中

Scrollbar(
    child: ListView.builder(...),
)

【讨论】：

两个外部包的指示非常有用。在 Flutter 中，与其他框架相比，与外部依赖项的集成更为重要。

【解决方案3】：

我认为最好使用CupertinoScrollbar 而不是Scrollbar。 CupertinoScrollbar 是可以触摸和滚动到底部..

例如：

 CupertinoScrollbar(
            child: ListView.builder(...),

或者

Scrollbar(
    child: ListView.builder(...),

【讨论】：

【解决方案4】：

在此代码中：如何在ListView 中显示的示例

child: Scrollbar( 
   child: ListView.builder(
   padding: EdgeInsets.all(5),
   itemCount: snapshot.data.length,
    physics: BouncingScrollPhysics(),
    itemBuilder: (context, index) {
      return generateColum(snapshot.data[index], index);
    }),
 ),

【讨论】：

【解决方案5】：

创建一个ScrollController变量(ScrollController _scrollController); 在 initState() 或任何你想要的地方创建 _scrollController_scrollController = ScrollController();
在Scrollbar 和ListView 属性中添加_scrollController 变量，

controller:_scrollController

代码如下：

ScrollController _scrollController;
  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }
Scrollbar(
        isAlwaysShown: true,
         controller: _scrollController,
         child: ListView(
         controller: _scrollController,
   )

如果您不希望它始终显示为 false

isAlwaysShown: false,

【讨论】：

如果您需要滚动条从一开始就可见，这会更好，这正是我所寻找的。感谢您的回答！

【解决方案6】：

Scrollbar(
        thickness: 10,
        isAlwaysShown: true,
        child: ListView.builder(
          itemCount: _controller().transactonsList.length,
          itemBuilder: (context, index) {
            return Card(
              elevation: 5,
              child: Container(
                padding: const EdgeInsets.only(bottom: 16),
                height: 80,
                child: Row(
                  children: [
                    SizedBox(width: 10),
                    amountOfTransaction(index),
                    SizedBox(width: 16),
                    dateAndTitleOfTransaction(index),
                  ],
                ),
              ),
            );
          },
        ),
      )

【讨论】：