如何制作这个 Flutter Page 幻灯片指示器？

Posted 2023-02-23

【中文标题】如何制作这个 Flutter Page 幻灯片指示器？

【英文标题】：how to make this Flutter Page slide indicator?

【发布时间】：2021-11-21 00:39:57

【问题描述】：

任何人都可以帮助我，我想知道 - 这个指标的名称是什么。 如何在颤动中制作这个颤动页面幻灯片指示器。

如果有要构建它的包，请分享包。

谢谢。

【问题讨论】：

您可以搜索滚动指示器（或垂直滚动​​指示器）。如果它们有任何帮助，也请这些链接 - scroll indicator list view，scrollbar indicators，draggable scrollbar

【参考方案1】：

我会使用一个名为 PageView 的颤振小部件。

并且会有2个容器相互嵌套。

外部容器将具有透明背景。 Inner Container 将是您想要显示的视图。

您可能想要调整页面的size 和scrollDirection。

https://api.flutter.dev/flutter/widgets/PageView-class.html

【参考方案2】：

您可以将 ListView 包装在 ScrollBar 小部件中。您只能在 android 上自定义它（将颜色变为黄色，如缩略图所示），因为 ScrollBar 在 ios 上是硬编码的，它是标准的。为此，请指定一个 ScrollBar 主题，如 article1 所示。

另一种方法是实现您自己的 ScrollBar 小部件，因此它在两个平台上看起来都一样：article2（当然它需要一些调整，但这是一个好的开始）

希望能帮到你，祝你有个愉快的一天！