Flutter下拉揭示内容插件reveal_on_pull的使用

Flutter下拉揭示内容插件reveal_on_pull的使用

功能

• 轻松在下拉时显示隐藏的部件。
• 可自定义揭示行为和动画。
• 平滑且响应迅速的用户体验。
• 兼容iOS和Android。

安装

在您的pubspec.yaml文件中添加以下依赖项：

dependencies:
  reveal_on_pull: ^1.0.0

然后运行flutter pub get来安装该包。

使用方法

要使用此包，请将您的部件树用RevealOnPull包裹，并指定要显示的部件。

RevealOnPull(
  scrollController: scrollController, // 滚动控制器
  animationDuration: const Duration(milliseconds: 500), // 动画持续时间
  widgetToRevealHeight: widgetToRevealHeight, // 部件高度
  widgetToReveal: Container( // 要显示的部件
    height: widgetToRevealHeight,
    width: MediaQuery.of(context).size.width,
    color: Colors.red, // 红色背景
  ),
  scrollableChild: CustomScrollView(
    controller: scrollController, // 滚动控制器
    physics: const ClampingScrollPhysics(), // 物理滚动效果
    slivers: [
      SliverList(
        delegate: SliverChildListDelegate(
          [
            for (var index = 0; index < 100; index++)
              Container(
                height: 100,
                decoration: BoxDecoration(
                  border: Border.all(width: 0.1), // 边框
                ),
                alignment: Alignment.center,
                child: Text('$index'), // 显示索引数字
              ),
          ],
        ),
      ),
    ],
  ),
)

示例代码

以下是完整的示例代码，展示如何在Flutter应用中使用reveal_on_pull插件。

import 'package:flutter/material.dart';
import 'package:reveal_on_pull/reveal_on_pull.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reveal on pull - Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Reveal on pull - Example'),
    );
  }
}

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> {
  ScrollController scrollController = ScrollController();
  final double widgetToRevealHeight = 180;

  [@override](/user/override)
  void dispose() {
    scrollController.dispose(); // 释放资源
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title), // 应用栏标题
      ),
      body: RevealOnPull(
        scrollController: scrollController, // 滚动控制器
        animationDuration: const Duration(milliseconds: 500), // 动画持续时间
        widgetToRevealHeight: widgetToRevealHeight, // 部件高度
        widgetToReveal: Container( // 要显示的部件
          height: widgetToRevealHeight,
          width: MediaQuery.of(context).size.width,
          color: Colors.red, // 红色背景
        ),
        scrollableChild: CustomScrollView(
          controller: scrollController, // 滚动控制器
          physics: const ClampingScrollPhysics(), // 物理滚动效果
          slivers: [
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  for (var index = 0; index < 100; index++)
                    Container(
                      height: 100,
                      decoration: BoxDecoration(border: Border.all(width: 0.1)), // 边框
                      alignment: Alignment.center,
                      child: Text('$index'), // 显示索引数字
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}