使用 flutter_sticky_widgets，您可以像在 CSS 中使用 position: sticky; 一样使用 widget

使用 flutter_sticky_widgets，您可以像在 CSS 中使用 position: sticky; 一样使用小部件。

粘性小部件是一种 UI 模式，我们希望小部件能够随着 UI 一起滚动到某个点，然后固定在屏幕上，而不是滚出屏幕。

(第一个图像中的绿色播放按钮，第二个图像中的随机播放按钮是 position: sticky 的示例)

入门

import 'package:flutter_sticky_widgets/flutter_sticky_widgets.dart';

StickyContainer(
    stickyChildren: [
        StickyWidget(
            initialPosition: StickyPosition(bottom: 20, right: 20),
            finalPosition: StickyPosition(
                bottom: MediaQuery.of(context).size.height - 80, right: 20),
            controller: _controller,
            child: Container(
            width: 40,
            height: 40,
            decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.green,
            ),
            child: const Center(child: Icon(Icons.pause)),
            ),
        ),
    ],
    child: ListView.builder(
    controller: _controller,
    itemCount: 50,
    itemBuilder: (context, index) {
        return ListTile(
            title: Text("Tile $index"),
        );
    }),
);

StickyWidget

用于实现粘性模式的小部件。

initialPosition (StickyPosition): 指示小部件在滚动开始前的初始位置。位置由自定义类 StickyPosition 表示。
finalPosition (StickyPosition): 指示小部件在滚动足够多的量后将保持粘性的位置。如果反向滚动，小部件将恢复到其初始位置。
controller (ScrollController): StickyWidget 使用它来检测滚动。必须将相同的 ScrollController 附加到您的 Scrollable (ListView, SingleChildScrollView, CustomScrollView, …) 小部件上，StickyWidgets 才能正常工作。它还用于确定滚动轴是垂直还是水平。
callback (Function(double)?) (可选): 一个可选的回调函数，它会在每次滚动时被调用。它接收 scrolloffset 作为参数，可用于动画化 StickyWidget。

StickyContainer

它必须是使用的 Scrollable 小部件的父元素。StickyContainer 的尺寸被 StickyWidgets 用作定位它们的参考尺寸。因此，请确保 StickyContainer 的尺寸与 Scrollable 小部件的尺寸相同。

child (Widget): 理想情况下，此参数应提供 Scrollable 小部件，如果不是，您需要确保 StickyContainer 的尺寸与 Scrollable 的尺寸相同。
stickyChildren (List<StickyWidget>): 您可以提供一个或多个 StickyWidgets。
displayOverFlowContent (bool) (可选): 如果您希望 StickyWidgets 显示在 StickyContainer 的边界之外，则设置为 true。

StickyPosition

一个自定义类，用于表示 StickyWidget 的初始位置和最终位置。它接受四个参数 (top, bottom, left, right)。但您应该只提供其中两个 (top / bottom, right / left)。

注意：确保为 initialPosition 和 finalPosition 中使用的 StickyPosition 传递相同的参数集

例如

正确 ✅ initialPosition: StickyPosition(top: .., left: ..) finalPosition: StickyPosition(top: .., left: ..)

错误 ❌ (最终位置也应使用 top 而不是 bottom)

initialPosition: StickyPosition(top: .., left: ..) finalPosition: StickyPosition(bottom: .., left: ..)

GitHub

查看 Github

使用 flutter_sticky_widgets，您可以像在 CSS 中使用 position: sticky; 一样使用 widget