Flutter分屏布局插件split_pane的使用

Flutter分屏布局插件split_pane的使用

split_pane 是一个用于实现 Material Design 分屏布局的 Flutter 插件。通过该插件，开发者可以轻松地创建具有固定或灵活布局的分屏组件。

特性

• 固定布局
• 灵活布局
• 指定规格的动画（不支持）
• 无障碍功能（不支持）
• 相对于自定义中心/显示特性的灵活布局（不支持）
• API 质量（主题、继承数据等）（不支持）

使用方法

以下是一个简单的示例，展示了如何使用 split_pane 插件来创建一个基本的分屏布局。

import 'package:split_pane/split_pane.dart';

Widget build(BuildContext context) {
  return SplitPane(
    primary: Placeholder(), // 主面板
    secondary: Placeholder(), // 辅助面板
  );
}

完整示例

下面是一个更完整的示例，展示了如何使用 split_pane 插件来创建一个具有旋转按钮和切换面板位置功能的分屏布局。

import 'package:example/pane.dart';
import 'package:example/rotate_button.dart';
import 'package:example/switch_pane_button.dart';
import 'package:example/theme.dart';
import 'package:flutter/material.dart';
import 'package:split_pane/split_pane.dart';

void main() => runApp(const ExampleApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late final SplitController _controller;
  Axis _direction = Axis.horizontal;
  PaneLocation _paneLocation = PaneLocation.trailing;

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

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        child: ListenableBuilder(
          listenable: _controller,
          builder: (context, _) {
            return SplitPane(
              controller: _controller,
              direction: _direction,
              primaryPaneLocation: _paneLocation,
              primary: Pane(
                child: Center(
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    spacing: 8.0,
                    children: [
                      RotateButton(onPressed: _onRotate), // 旋转按钮
                      SwitchPaneButton(
                        paneLocation: _paneLocation,
                        direction: _direction,
                        onPressed: _onSwitchPane, // 切换面板按钮
                      ),
                    ],
                  ),
                ),
              ),
              secondary: ClipRect(
                child: Pane(
                  child: Center(
                    child: Text(sizeAsString), // 显示当前尺寸
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _onRotate() {
    setState(() => _direction =
        _direction == Axis.horizontal ? Axis.vertical : Axis.horizontal); // 切换方向
  }

  String get sizeAsString {
    final position = _controller.position;
    if (_controller.isAbsolute) {
      final dp = position.toStringAsFixed(0);
      return '$dp dp';
    } else {
      final percent = (position * 100).toStringAsFixed(0);
      return '$percent%';
    }
  }

  void _onSwitchPane() {
    setState(() {
      _paneLocation = switch (_paneLocation) {
        PaneLocation.leading => PaneLocation.trailing,
        PaneLocation.trailing => PaneLocation.leading,
      };
    });
  }
}