Flutter布局插件pluto_layout的使用

Flutter布局插件PlutoLayout的使用

PlutoLayout - v1.0.0

PlutoLayout 是一个 Flutter UI 包，可以在页面的各个方向配置菜单或标签页。你可以通过拖动标签页的右侧边框来调整其宽度。此外，你还可以为打开、关闭和调整标签页大小分配自定义快捷键。

安装

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

dependencies:
  pluto_layout: ^1.0.0

然后运行 flutter pub get 来安装插件。

使用示例

以下是一个完整的示例代码，展示了如何使用 PlutoLayout 创建一个包含顶部、左侧、右侧和底部标签页的布局，并为其添加快捷键功能。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pluto_layout/pluto_layout.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PlutoLayout(
        // 定义快捷键
        shortcuts: {
          LogicalKeySet(LogicalKeyboardKey.escape): 
            PlutoLayoutActions.hideAllTabView(),  // 按下 Esc 键隐藏所有标签页
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit1): 
            PlutoLayoutActions.rotateTabView(PlutoLayoutContainerDirection.left),  // Alt + 1 旋转左侧标签页
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit2): 
            PlutoLayoutActions.rotateTabView(PlutoLayoutContainerDirection.right),  // Alt + 2 旋转右侧标签页
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowUp): 
            PlutoLayoutActions.increaseTabView(),  // Alt + 向上箭头 增加标签页大小
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowDown): 
            PlutoLayoutActions.decreaseTabView(),  // Alt + 向下箭头 减小标签页大小
        },
        // 主体内容
        body: const PlutoLayoutContainer(
          child: Text('Body container'),  // 主体区域的内容
        ),
        // 顶部标签页
        top: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'top1',
                title: 'Top 1',  // 标签页标题
                tabViewBuilder: (e) => const Text('Top 1 Content'),  // 标签页内容
              ),
              PlutoLayoutTabItem(
                id: 'top2',
                title: 'Top 2',
                tabViewBuilder: (e) => const Text('Top 2 Content'),
              ),
            ],
          ),
        ),
        // 左侧标签页
        left: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'left1',
                title: 'Left 1',
                tabViewBuilder: (e) => const Text('Left 1 Content'),
              ),
              PlutoLayoutTabItem(
                id: 'left2',
                title: 'Left 2',
                tabViewBuilder: (e) => const Text('Left 2 Content'),
              ),
            ],
          ),
        ),
        // 右侧标签页
        right: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'right1',
                title: 'Right 1',
                tabViewBuilder: (e) => const Text('Right 1 Content'),
              ),
              PlutoLayoutTabItem(
                id: 'right2',
                title: 'Right 2',
                tabViewBuilder: (e) => const Text('Right 2 Content'),
              ),
            ],
          ),
        ),
        // 底部标签页
        bottom: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'bottom1',
                title: 'Bottom 1',
                tabViewBuilder: (e) => const Text('Bottom 1 Content'),
              ),
              PlutoLayoutTabItem(
                id: 'bottom2',
                title: 'Bottom 2',
                tabViewBuilder: (e) => const Text('Bottom 2 Content'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}