Flutter可调整列宽插件resizable_columns的使用

Flutter可调整列宽插件resizable_columns的使用

介绍

ResizableColumns 是一个 Flutter 小部件，提供了灵活且可调整大小的布局，并带有可拖动的分隔符。它允许你创建多面板布局，用户可以通过拖动面板之间的分隔符来调整面板的大小。适合用于构建响应式和交互式的用户界面，这些界面需要可调整的面板大小。

特性

• 可调整大小的面板：允许用户通过拖动分隔符来调整子小部件的大小。
• 水平和垂直方向：支持水平和垂直布局。
• 初始大小和比例：为每个面板设置初始大小或比例。
• 最小和最大面板大小：强制约束以防止面板变得过小或过大。
• 自定义分隔符：调整面板之间分隔符的厚度。
• 对齐选项：在分配的空间内对齐子小部件。
• 响应式设计：当窗口大小改变时，按比例调整面板大小。

安装

在 pubspec.yaml 文件的依赖项下添加以下行：

dependencies:
  resizable_columns: ^0.0.1

然后运行：

flutter pub get

在 Dart 代码中导入该包：

import 'package:resizable_columns/resizable_columns.dart';

使用

基本示例

这是一个简单的例子，展示了如何在水平方向上使用 ResizableColumns 创建三个面板：

ResizableColumns(
  orientation: ResizableOrientation.horizontal,
  dividerThickness: 8.0,
  minChildSize: 100.0,
  children: [
    (context) => Container(color: Colors.red),
    (context) => Container(color: Colors.blue),
  ],
);

设置初始比例

你可以设置初始比例来控制面板的初始大小：

ResizableColumns(
  orientation: ResizableOrientation.horizontal,
  dividerThickness: 8.0,
  initialProportions: const [1, 1, 1],
  minChildSize: 100.0,
  children: [
    (context) => Container(color: Colors.red),
    (context) => Container(color: Colors.blue),
    (context) => Container(color: Colors.green),
  ],
);

API 参考

FlexibleResizableLayout

这是一个显示多个可调整大小的子小部件的小部件，这些子小部件由可拖动的分隔符分隔。

构造函数

const ResizableColumns({
  super.key,
  required this.children,
  required this.orientation,
  this.dividerThickness = 2.0,
  this.dividerColor = Colors.transparent,
  this.initialProportions,
  this.initialSizes,
  this.draggable = true,
  this.alignment = Alignment.topLeft,
  this.minChildSize = 50.0,
})

参数

• children: 一个构建子小部件的函数列表。每个函数接收 BuildContext 和分配给该子小部件的大小。
• orientation: 布局的方向（ResizableOrientation.horizontal 或 ResizableOrientation.vertical）。
• dividerThickness: 分割面板之间的分隔符的厚度。
• dividerColor: 分割面板之间的分隔符的颜色。
• initialProportions: 每个面板的初始比例。列表长度必须与子小部件的数量匹配。
• initialSizes: 每个面板的初始大小。列表长度必须与子小部件的数量匹配。
• draggable: 是否分隔符可拖动。
• alignment: 子小部件在其分配空间内的对齐方式。
• minChildSize: 每个面板可以缩小到的最小尺寸。

ResizableOrientation

这是一个指定布局方向的枚举。

enum ResizableOrientation {
  vertical,
  horizontal,
}

示例

这是一个完整的示例，展示了一个具有初始比例和自定义设置的可调整布局：

import 'package:flutter/material.dart';

import 'package:resizable_columns/resizable_columns.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Resizable Columns Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Resizable Columns')),
        body: ResizableColumns(
          orientation: ResizableOrientation.horizontal,
          dividerThickness: 8.0,
          dividerColor: Colors.grey,
          initialProportions: const [1, 1, 1],
          minChildSize: 100.0,
          children: [
            (context) => Container(color: Colors.red),
            (context) => Container(color: Colors.blue),
            (context) => Container(color: Colors.green),
          ],
        ),
      ),
    );
  }
}