Flutter ListView滚动指示器

22 dart flutter

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

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

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

PS:我知道有办法建立自己的Scroll Indicator,但我不想要那么多的功能.我只想要一个可以在屏幕上显示的简单指示器.

小智 49

感谢GünterZöchbauer.

你可以包装你ListViewScrollbar

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

  • 请注意,此解决方案(包装在“Scrollbar”中)**适用于任何可滚动小部件**(例如“SingleChildScrollView”),而不仅仅是 ListView。将 **`isAlwaysShown`** 参数设置为 true,以便即使不滚动时滚动条也可见;然而,即使 isAlwaysShown 为 true,如果不需要滚动条(因为可滚动内容没有超出其限制),滚动条也不会显示。 (2认同)

Blo*_*oss 10

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

前任:

 CupertinoScrollbar(
            child: ListView.builder(...),
Run Code Online (Sandbox Code Playgroud)

或者

Scrollbar(
    child: ListView.builder(...),
Run Code Online (Sandbox Code Playgroud)


Rem*_*emy 8

创建一个ScrollController变量(ScrollController _scrollController); Instatiate_scrollController在里面initState()或者任何你想要的地方,在里面_scrollController = ScrollController();
添加_scrollController变量ScrollbarListView属性,

controller:_scrollController
Run Code Online (Sandbox Code Playgroud)

这是代码:

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

如果你不想让它总是显示设置为 false

thumbVisibility: false,
Run Code Online (Sandbox Code Playgroud)


San*_*inh 7

您可以实现此设计器滚动条库:

  1. draggable_scrollbar

  2. 字母滚动

或者

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

Scrollbar(
    child: ListView.builder(...),
)
Run Code Online (Sandbox Code Playgroud)


Par*_*iya 7

在此代码中:如何显示的示例 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);
    }),
 ),
Run Code Online (Sandbox Code Playgroud)