原文：multi_split_view | Flutter Package (flutter-io.cn)

译时版本：2.1.0

---

Multi split view 

为 Flutter 提供水平或垂直的多分割视图的组件。

• 水平分割或垂直分割

• 可为每个子组件配置比重或尺寸

• 当有如下操作时，自动计算比重：

  • 添加未定义比重的子组件
  • 当子组件被移除时重新分配比重

• 可检测子组件尺寸变化的监听器

用法

水平分割

        MultiSplitView(children: [child1, child2, child3]);

垂直分割

        MultiSplitView(axis: Axis.vertical, children: [child1, child2]);

水平和垂直同时分割

        MultiSplitView(axis: Axis.vertical, children: [
          MultiSplitView(children: [child1, child2, child3]),
          child4
        ]);

设置初始比重

使用 StatelessWidget

        // 为第一个子组件设置 10% 的比重
        MultiSplitView multiSplitView = MultiSplitView(
            children: [child1, child2, child3], initialAreas: [Area(weight: 0.1)]);

使用 StatefulWidget

      MultiSplitViewController _controller =
          MultiSplitViewController(areas: [Area(weight: 0.1)]);

或

      MultiSplitViewController _controller2 =
          MultiSplitViewController(areas: Area.weights([0.1]));

和

        // 为第一个子组件设置 10% 的比重
        MultiSplitView multiSplitView = MultiSplitView(
            children: [child1, child2, child3], controller: _controller);

用程序改变比重或尺寸

        _controller.areas = [Area(size: 150)];

最小子组件高度

      MultiSplitViewController _controller =
          MultiSplitViewController(areas: [Area(minimalWeight: .25), Area(minimalWeight: .25)]);

最小子组件尺寸（像素单体）

      final MultiSplitViewController _controller =
          MultiSplitViewController(areas: [Area(minimalSize: 150)]);

可调整

        MultiSplitView(children: [child1, child2, child3], resizable: false);

监听器

        MultiSplitView(
            children: [child1, child2, child3, child4],
            onWeightChange: () =>
                DemoFlu.printOnConsole(context, 'Weight has changed'));

分割线宽度

        MultiSplitView multiSplitView =
            MultiSplitView(children: [child1, child2, child3]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            child: multiSplitView,
            data: MultiSplitViewThemeData(dividerThickness: 30));

组件作为自定义的分割线

        MultiSplitView multiSplitView = MultiSplitView(
            children: [child1, child2, child3],
            dividerBuilder:
                (axis, index, resizable, dragging, highlighted, themeData) {
              return Container(
                color: dragging ? Colors.grey[300] : Colors.grey[100],
                child: Icon(
                  Icons.drag_indicator,
                  color: highlighted ? Colors.grey[600] : Colors.grey[400],
                ),
              );
            });

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            child: multiSplitView,
            data: MultiSplitViewThemeData(dividerThickness: 24));

分割线的点击动作

        MultiSplitView multiSplitView = MultiSplitView(
            children: [...],
            onDividerTap: (dividerIndex) => {},
            onDividerDoubleTap: (dividerIndex) => {});

分割线绘制器

可用  DividerPainter 类自定义分割线。

DividerPainters 工厂类提供默认的绘制器。

分割线 - 背景色

DividerPainters.background 可设置背景色。默认颜色是 NULL 。

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            child: multiSplitView,
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.background(color: Colors.black)));

分割线 - 高亮背景色

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            child: multiSplitView,
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.background(
                    color: Colors.grey[200], highlightedColor: Colors.grey[800])));

虚线分割线

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.dashed(
                    color: Colors.deepOrange, highlightedColor: Colors.black)),
            child: multiSplitView);

虚线分割线 - 自定义

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.dashed(
                    gap: 30, size: 20, thickness: 3, highlightedThickness: 6)),
            child: multiSplitView);

槽分割线 1

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.grooved1(
                    color: Colors.indigo[100]!,
                    highlightedColor: Colors.indigo[900]!)),
            child: multiSplitView);

槽分割线 1 - 自定义

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.grooved1(
                    size: 5,
                    highlightedSize: 30,
                    thickness: 3,
                    highlightedThickness: 6)),
            child: multiSplitView);

槽分割线 2

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.grooved2(
                    color: Colors.grey[400]!, highlightedColor: Colors.red)),
            child: multiSplitView);

槽分割线 2 - 自定义

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
                dividerPainter: DividerPainters.grooved2(
                    gap: 15,
                    thickness: 4,
                    count: 3,
                    highlightedCount: 9,
                    strokeCap: StrokeCap.square)),
            child: multiSplitView);

分割线 - 自定义绘制器

可扩展 DividerPainter 类用于从草图创建绘制器。

    class MyDividerPainter extends DividerPainter {
      @override
      Map<int, Tween> buildTween() {
        Map<int, Tween> map = super.buildTween();
        // create your tween here, example:
        map[100] = Tween<double>(begin: 1, end: 5);
        return map;
      }

      @override
      void paint(
          {required Axis dividerAxis,
          required bool resizable,
          required bool highlighted,
          required Canvas canvas,
          required Size dividerSize,
          required Map<int, dynamic> animatedValues}) {
        super.paint(
            dividerAxis: dividerAxis,
            resizable: resizable,
            highlighted: highlighted,
            canvas: canvas,
            dividerSize: dividerSize,
            animatedValues: animatedValues);
        double myAnimatedValue = animatedValues[100];
        // ...
      }
    }

        MultiSplitView multiSplitView = MultiSplitView(children: [child1, child2]);

        MultiSplitViewTheme theme = MultiSplitViewTheme(
            child: multiSplitView,
            data: MultiSplitViewThemeData(dividerPainter: MyDividerPainter()));

---