Flutter Widget 之 Scrollbar

默认情况下Flutter中的可滚动小部件不显示滚动条（scrollbar）,这在很多情况下都没问题

但是在其他情况下你会想要显示滚动条，滚动条向用户显示他们滚动了多少并且允许跳转到列表中的特定点

要显示滚动条请使用名为Scrollbar的小部件，将Scrollbar环绕在任何可滚动的小部件上

如ListView、GridView或Sustom ScrollView,

Scrollbar(
    child: MyScrollableWidget()
)

确保可滚动的小部件是有限的,请确保定义了itemCount，否则，可滚动的小部件不知道它到底离底部有多远，因此滚动条将不可见。

Scrollbar(
    child: ListView.builder(
        itemCount: 20,
        itemBuilder: (c, i) => MyItem(i),
    ),
)

但是假设你的可滚动部件是有限的并且你已经用Scrollbar包装了它，你就完成了

默认情况下，滚动条在不使用时会被隐藏， 你可以使用isAlwaysShown强制它始终可见

Scrollbar(
    isAlwaysShown: true,
    child: MyScrollableWidget(),
)

默认情况下，只有滑块是可见的，这是滚动条移动的部分

你可以要求小部件也显示轨迹，那是滑块移动的轨道，用户可以点击轨道来访问列表中的特定部分

要显示轨迹请使用showTrackOnHover

Scrollbar(
    showTrackOnHover: true,
    child: MyScrollableWidget(),
)

当然，滚动条在垂直和水平的情况下都可工作，

你可以使用ScrollbarTheme以任何你想要的方式来设计它们

如果想了解有关Scrollbar 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址