在 ListView 中显示滚动条

OldBird

实用Tips|2024-11-14|Last edited: 2024-11-13|
type
status
date
slug
summary
tags
category
icon
password
<ins/>
 
ListView 是 Flutter 应用开发中非常常见且广泛使用的组件,用于展示用户可以滚动的列表项。
有时用户很难判断屏幕是否可以滚动,因为他们无法看到屏幕上的滚动条。
Flutter 的 ListView 组件没有内置显示滚动条的功能。不过,Flutter 提供了一个组件可以实现这个功能,那就是 “Scrollbar()” 组件。
Scrollbar 组件非常简单易用。只需将 ListView() 包裹在 Scrollbar 组件中,就完成了。
查看以下代码示例。
notion image
但是,上面代码的问题是,直到你与 ListView 交互时,滚动条才会显示出来。

如果你希望滚动条始终可见,则需要稍微修改代码。

  1. 给 Scrollbar 组件添加属性:isAlwaysShown: true
  1. 创建一个 ScrollController 对象,并将其传递给 Scrollbar 和 ListView。
查看下面的代码示例。
notion image
这是完整代码示例的 gist:https://gist.github.com/dhuma1981/a2c25929e9065e7fbb37f2b2b75cb8f3

总结:

Scrollbar() 组件的最好的一点是,它会自动检查是否有可滚动的内容。如果不需要滚动,滚动条将不会显示 :)
<ins/>
Loading...