Flutter桌面分屏插件desktop_split_pane的使用

desktop_split_pane

一个支持热重载的 Flutter 桌面和 Web 分屏组件。

特性

• 支持热重载（不像旧版的 resizable_widget）
• 动画缩放
• 应用窗口调整大小时自动缩放
• 可以自定义分隔条厚度和颜色
• 状态公开以便支持显式小部件重建（只需调用状态上的 rebuild() 方法）
• 运行时可以移除和添加小部件而无需热重启
• 此功能非常适合展示侧边栏并在以后隐藏它们
• 添加了 onResize(widths/heights) 函数来监听缩放事件

开始使用

在项目中添加依赖：

flutter pub add desktop_split_pane

使用方法

以下是一个完整的示例，展示了如何使用 desktop_split_pane 插件创建一个水平和垂直分屏布局。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) => HorizontalSplitPane(
            constraints: constraints,
            separatorColor: Colors.black,
            separatorThickness: 4.0,
            fractions: [0.2, 0.2, 0.2, 0.4],
            children: [
              Container(
                color: Colors.blue,
              ),
              Container(
                color: Colors.pinkAccent,
              ),
              Container(
                color: Colors.purpleAccent,
              ),
              VerticalSplitPane(
                constraints: constraints,
                separatorColor: Colors.white,
                separatorThickness: 4.0,
                children: [
                  Container(
                    color: Colors.grey,
                  ),
                  Container(
                    color: Colors.greenAccent,
                  ),
                  Container(
                    color: Colors.teal,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解析

1. 导入库

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

2. 主应用入口

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

3. 构建MaterialApp

   class App extends StatelessWidget {
     const App({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: Scaffold(
           body: LayoutBuilder(
             builder: (context, constraints) => HorizontalSplitPane(
               constraints: constraints,
               separatorColor: Colors.black,
               separatorThickness: 4.0,
               fractions: [0.2, 0.2, 0.2, 0.4],
               children: [
                 // 子容器配置
               ],
             ),
           ),
         ),
       );
     }
   }
   

4. 水平分屏

   HorizontalSplitPane(
     constraints: constraints,
     separatorColor: Colors.black,
     separatorThickness: 4.0,
     fractions: [0.2, 0.2, 0.2, 0.4],
     children: [
       Container(
         color: Colors.blue,
       ),
       Container(
         color: Colors.pinkAccent,
       ),
       Container(
         color: Colors.purpleAccent,
       ),
       VerticalSplitPane(
         constraints: constraints,
         separatorColor: Colors.white,
         separatorThickness: 4.0,
         children: [
           Container(
             color: Colors.grey,
           ),
           Container(
             color: Colors.greenAccent,
           ),
           Container(
             color: Colors.teal,
           ),
         ],
       ),
     ],
   )
   

5. 垂直分屏

   VerticalSplitPane(
     constraints: constraints,
     separatorColor: Colors.white,
     separatorThickness: 4.0,
     children: [
       Container(
         color: Colors.grey,
       ),
       Container(
         color: Colors.greenAccent,
       ),
       Container(
         color: Colors.teal,
       ),
     ],
   )