如何在ListView中添加滚动指示器

Question

有什么方法可以在

ListView

上显示滚动指示器吗？

这是我的基本代码：

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

Answer 1

感谢Günter Zöchbauer。

您可以将

ListView

包裹在

Scrollbar

中

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

Answer 2

我认为使用

CupertinoScrollbar

而不是

Scrollbar

更好。

CupertinoScrollbar

可以触摸并滚动到底部..

例如：

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

或者

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

Answer 3

您可以实现这个designer滚动条库：

1. draggable_scrollbar

2. 字母滚动

或

您可以将 ListView 包装在

Scrollbar

小部件中

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

Answer 4

创建一个 ScrollController 变量

(ScrollController _scrollController);

在

_scrollController

内或任何你想要的地方设置

initState()

，

_scrollController = ScrollController();

在

_scrollController

和

Scrollbar

属性中添加

ListView

变量，

controller:_scrollController

这是代码：

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

如果您不希望它始终显示，请设置为 false

thumbVisibility: false,

Answer 5

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

Answer 6

final ScrollController _scroll = ScrollController();

@override
Widget build(BuildContext context) {
  (...)
  child: ListView.builder(
    controller: _scroll,
  )
}

Answer 7

如果您需要稍微设置滚动条的样式，请将ListView包裹在RawScrollbar中，并对两个小部件使用相同的滚动控制器实例

final ScrollController _scrollController = ScrollController();

@override
Widget build(BuildContext context) {
      (...)
      child: RawScrollbar(
          controller: _scrollController,
          thumbColor: Colors.redAccent,
          radius: const Radius.circular(8),
          crossAxisMargin: 2,
          child: ListView.builder(
            controller: _scrollController,
            itemCount: 50,
            itemBuilder: (context, index) => ListTile(
              title: Text("Item= ${index + 1}"),
            ),
          ),
        ),
  }


    

Answer 8

滚动条( 孩子：ListView.builder（ 商品数量：20， itemBuilder:(c,i) => MyItem(i), ), ),

您必须提供 itemcount 作为您拥有的列表数量 -----示例：itemCount: items.length,-----

Answer 9

您还可以使用 ScrollbarTheme 调整此滚动条。

            Container(
                constraints: const BoxConstraints(maxHeight: 200),
                child: ScrollbarTheme(
                  data: const ScrollbarThemeData(
                    crossAxisMargin: -8,
                    thickness: MaterialStatePropertyAll(4.0),
                    thumbColor: MaterialStatePropertyAll(Colors.red),
                  ),
                  child: Scrollbar(
                    child: ListView.separated(
                      ...
                    ),
                  ),
                ),
              ),