Flutter ListView滚动指示器

时间:2018-10-28 10:50:23

标签: dart flutter

有什么方法可以在ListView上显示滚动指示器?

这是我正在使用的基本代码

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

6 个答案:

答案 0 :(得分:21)

感谢Günter Zöchbauer

您可以将ListView包裹在Scrollbar

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

答案 1 :(得分:6)

您可以实现此 designer 滚动条库:

  1. draggable_scrollbar

  2. alphabet scrolling

OR

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

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

答案 2 :(得分:5)

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

例如:

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

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

答案 3 :(得分:4)

在此代码中:如何在ListView中显示

scroll indicator

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

答案 4 :(得分:1)

创建一个 ScrollController 变量 (ScrollController _scrollController);_scrollController 内或任何您想要的地方实例化 initState()_scrollController = ScrollController();
_scrollControllerScrollbar 属性中添加 ListView 变量,

controller:_scrollController

代码如下:

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

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

isAlwaysShown: false,

答案 5 :(得分:1)

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