Flutter重叠面板管理插件overlapping_panels的使用

Flutter重叠面板管理插件overlapping_panels的使用

插件介绍

overlapping_panels 是一个用于在Flutter应用中添加类似Discord风格导航的插件。它允许用户通过点击按钮来切换不同的面板。

安装和使用示例

首先，你需要在你的项目中安装这个插件。打开终端并运行以下命令：

flutter pub add overlapping_panels

接下来，我们来看一下如何在代码中使用这个插件。

示例代码

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

class _MyHomePageState extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      childrenBuilder: (context, child) {
        return OverlappingPanels(
          // 使用Builder widget是可选的。你可以直接传递你的Widget。
          // 但是如果你想使用 `OverlappingPanels.of(context)`，你需要将你的Widget包裹在一个Builder中。
          left: Builder(builder: (context) {
            return constLeftPage();
          }),
          right: Builder(
            builder: (context) => constRightPage(),
          ),
          main: Builder(
            builder: (context) {
              return constMainPage();
            },
          ),
          onSideChange: (side) {
            setState(() {
              if (side == RevealSide.main) {
                // 隐藏一些东西
              } else if (side == RevealSide.left) {
                // 显示一些东西
              }
            });
          },
        );
      },
    );
  }
}

// 左侧页面示例
Widget constLeftPage() {
  return Container(
    color: Colors.blue,
    width: 200.0,
    height: 100.0,
    child: Text('左侧页面'),
  );
}

// 右侧页面示例
Widget constRightPage() {
  return Container(
    color: Colors.red,
    width: 250.0,
    height: 150.0,
    child: Text('右侧页面'),
  );
}

// 主页面示例
Widget constMainPage() {
  return Container(
    color: Colors.green,
    width: 300.0,
    height: 200.0,
    child: Text('主页面'),
  );
}

使用说明

1. 创建面板：定义你想要显示的各个面板。每个面板都可以是一个单独的Container或其他任何Widget。
2. 设置回调函数：通过onSideChange参数为每个面板设置一个回调函数。当某个面板被隐藏或显示时，该回调函数会被调用。
3. 触发面板切换：可以通过点击按钮来触发面板的切换。例如，可以使用IconButton来实现这一点。

示例演示

class MainPage extends StatefulWidget {
  [@override](/user/override)
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Overlapping Panels Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                if (_animationController.isRunning) {
                  _animationController.reverse();
                } else {
                  _animationController.forward();
                }
              },
              child: Text('切换面板'),
            ),
            SizedBox(height: 20),
            OverlappingPanels(
              left: Builder(builder: (context) {
                return const LeftPage();
              }),
              right: Builder(
                builder: (context) =&gt; const RightPage(),
              ),
              main: Builder(
                builder: (context) {
                  return const MainPage();
                },
              ),
              onSideChange: (side) {
                setState(() {
                  if (side == RevealSide.main) {
                    // hide something
                  } else if (side == RevealSide.left) {
                    // show something
                  }
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}