Flutter可调整大小容器插件flutter_resizable_container的使用

描述

flutter_resizable_container 是一个为Flutter应用程序添加交互式可调整大小容器的插件。它允许你创建可以动态调整大小的UI组件，以适应不同的屏幕尺寸和用户交互。

功能特性

• 嵌套支持：完全支持嵌套，并且兼容从左到右（LTR）和从右到左（RTL）布局。
• 自定义分隔线：定制分隔线的外观。
• 响应用户交互：通过 onHoverEnter 和 onHoverExit 响应web桌面端的鼠标事件，通过 onTapDown 和 onTapUp 响应移动端的触摸事件。
• 编程控制：使用 ResizableController 程序化设置子项大小。
• 监听变化：通过监听 ResizableController 来响应子项大小的变化。

示例应用

查看交互示例应用 点击这里。每个例子都附带了内嵌的源代码预览，方便你在应用中直接查看代码。

开始使用

安装

在 pubspec.yaml 文件中添加依赖或使用命令安装：

flutter pub add flutter_resizable_container

使用方法

设置方向

指定 ResizableContainer 的方向，确定子项排列及调整大小的方向：

ResizableContainer(
  direction: Axis.horizontal,
  ...
)

使用 ResizableController

如果需要响应大小变化或程序化调整子项大小，需创建并引用 ResizableController：

final controller = ResizableController();

@override
void initState() {
    super.initState();
    controller.addListener(() {
        // 反应大小变化
        final List<double> pixels = controller.pixels;
        print(pixels.join(', '));
    });
}

@override
void dispose() {
    controller.dispose(); // 别忘了释放控制器
    super.dispose();
}

添加子项

提供一个 List<ResizableChild>，每个子项包含 child、可选的 divider 和 size：

children: [
    const ResizableChild(
        divider: ResizableDivider(
            thickness: 2,
            color: Colors.blue,
        ),
        size: ResizableSize.expand(max: 350),
        child: NavBarWidget(),
    ),
    const ResizableChild(
        divider: ResizableDivider(
            thickness: 2,
            padding: 3,
        ),
        child: BodyWidget(),
    ),
    const ResizableChild(
        size: ResizableSize.ratio(0.25, min: 100),
        child: SidePanelWidget(),
    ),
],

定义 ResizableSize

ResizableSize 类用于定义子项的初始大小配置：

const half = ResizableSize.ratio(0.5);
const threeHundredPixels = ResizableSize.pixels(300);
const expandable = ResizableSize.expand();

自定义 ResizableDivider

自定义分隔线的外观与行为：

divider: ResizableDivider(
    thickness: 2,
    padding: 5,
    length: const ResizableSize.ratio(0.25),
    onHoverEnter: () => setState(() => hovered = true),
    onHoverExit: () => setState(() => hovered = false),
    color: hovered ? Colors.blue : Colors.black,
    cursor: SystemMouseCursors.grab,
),

示例代码

以下是一个完整的示例，展示了如何使用 flutter_resizable_container 创建一个基本的应用程序结构：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Resizable Container Example')),
        body: MyResizableLayout(),
      ),
    );
  }
}

class MyResizableLayout extends StatefulWidget {
  @override
  _MyResizableLayoutState createState() => _MyResizableLayoutState();
}

class _MyResizableLayoutState extends State<MyResizableLayout> {
  final ResizableController _controller = ResizableController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      print(_controller.pixels.join(', '));
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ResizableContainer(
      controller: _controller,
      direction: Axis.horizontal,
      children: [
        ResizableChild(
          size: ResizableSize.pixels(200),
          child: Container(color: Colors.red, child: Center(child: Text('Left'))),
        ),
        ResizableChild(
          size: ResizableSize.expand(),
          child: Container(color: Colors.green, child: Center(child: Text('Middle'))),
        ),
        ResizableChild(
          size: ResizableSize.ratio(0.25),
          child: Container(color: Colors.blue, child: Center(child: Text('Right'))),
        ),
      ],
    );
  }
}

此代码段创建了一个水平排列的可调整大小容器，包含三个部分：左侧固定宽度，中间自动扩展，右侧按比例分配空间。当用户调整这些部分时，控制台将输出当前各部分的宽度。

许可证

该软件遵循MIT许可证，详情请参阅官方文档中的许可信息。

希望以上内容能帮助你更好地理解和使用 flutter_resizable_container 插件！如果有任何问题或需要进一步的帮助，请随时提问。