Flutter粘性元素管理插件flutter_sticky的使用

本文将介绍如何使用Flutter粘性元素管理插件flutter_sticky来实现粘性元素的效果。通过以下步骤，您可以快速上手并掌握其用法。

Features（功能）

• 实现粘性元素效果。
• 支持自定义粘性状态下的样式变化。
• 可动态调整粘性顶部或底部的距离。

Getting started（开始使用）

在开始之前，请确保您已经安装了flutter_sticky插件。可以通过以下命令将其添加到您的pubspec.yaml文件中：

dependencies:
  flutter_sticky: ^版本号

然后运行以下命令以更新依赖项：

flutter pub get

Usage（使用方法）

示例代码

以下是完整的示例代码，展示了如何使用flutter_sticky插件实现粘性元素的效果。

示例代码文件：example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_sticky/flutter_sticky.dart'; // 导入flutter_sticky插件

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController(); // 滚动控制器
  final GlobalKey _containerKey = GlobalKey(); // 容器key用于定位

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: widgets(_scrollController),
          ),
        ),
      ),
    );
  }

  // 生成列表项
  List<Widget> widgets(ScrollController scrollController) {
    List<Widget> widgets = [];
    for (var i = 0; i < 100; i++) {
      if (i == 10) {
        widgets.add(
          Container(
            key: _containerKey,
            color: Colors.black,
            padding: const EdgeInsets.symmetric(vertical: 200),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _stickyWidget(scrollController, top: 100), // 左侧粘性元素
                _stickyWidget(scrollController,
                    key: _containerKey, top: 100, bottom: 100), // 中间粘性元素
                _stickyWidget(scrollController, bottom: 100), // 右侧粘性元素
              ],
            ),
          ),
        );
        continue;
      }
      widgets.add(const SizedBox(height: 100, width: 500)); // 添加空白区域
    }
    return widgets;
  }

  // 创建粘性元素
  _stickyWidget(ScrollController scrollController,
      {double? top, double? bottom, GlobalKey? key}) {
    return StickyWidget(
      scrollController: scrollController, // 指定滚动控制器
      top: top, // 粘性顶部距离
      bottom: bottom, // 粘性底部距离
      containerKey: key, // 容器key
      childBuilder: (BuildContext context, bool sticky) => Container(
        height: 100,
        width: 500,
        decoration: BoxDecoration(
          color: sticky ? Colors.red : Colors.green, // 粘性时变为红色，否则为绿色
          borderRadius: sticky ? BorderRadius.circular(10) : null,
          boxShadow: sticky
              ? [BoxShadow(color: Colors.grey.withAlpha(100), blurRadius: 10)] // 粘性时增加阴影
              : null,
        ),
      ),
    );
  }
}