Flutter打造文件管理器雏形-布局篇

摘要：这是一个Flutter+Rust开发GUI的技术文。也是一个软件从零逐步迭代的记录文。更是一个FLAG，提醒自己保持迭代下去。

这是一个Flutter+Rust开发GUI的技术文。
也是一个软件从零逐步迭代的记录文。
更是一个FLAG，提醒自己保持迭代下去。

00. 往期目录

01. References锚点

界面风格主要参考了一款API管理软件，一款笔记软件，简介不花哨，

用上中下结构做主布局，中间部分又分为左中右三块儿，侧边栏，内容区域，扩展区域。

02. 主界面实现

a. 经典上中下结构

典型的Column布局，两头固定尺寸，中间动态分配

b. 让区域大小可拖拽调整

上边默认的布局形式只能固定尺寸或比例，借助multi_split_view可以实现拖拽调整尺寸的效果。

整体布局和Size如下图（后续加入实际内容后再微调）：

上：ToolsArea，固定48
中：MiddleArea，又分为左中右三个区域，flex占据最大可用空间
左：SideArea，默认200，最小120，最大400
中：ContentArea，flex占据最大可用空间
右：ExtraArea，默认160，最小120，最大240
下：StatusArea，固定24

初始化两个`MultiSplitViewController`，加入各区域并预设Size等信息

`_mainMultiSplitViewController`负责上中下结构主视图控制
`_middleMultiSplitViewController`负责左中右结构内容试图控制

上图右侧几个`build`开头的方法分别构建一块独立控制的布局区域，除了`buildMiddleArea`和`buildLayout`，其他的只是用`Container`创建的占位符。

`buildMiddleArea`控制左中右（侧边栏，主内容，扩展功能），`buildLayout`控制上中下（工具栏，中间区域，状态栏）
`builder`函数根据`controller`中`Area`元素`id`创建对应区域

注意：可拖拽试图的分隔线显示需要特别注意，默认的是一个比较粗的分割线，比较笨重，自定义修改主要两个地方

这两个属性都设置在了`Theme`里`dividerTheme`对象里，但用的地方不在一起：
分隔线颜色：`dividerBuilder`函数里构建Widget时指定`color`属性
分隔符厚度（粗细）：这个属性需要在`MultiSplitViewThemeData`里指定

c. 运行效果

03. 工具菜单区域

a.侧边栏折叠按钮和最小最大关闭

整体是一个Row布局，侧边栏按钮靠左，最小化最大化关闭三个按钮靠右

`_isMaximized`状态控制当前窗口是否已最大化，用于切换显示图标和事件

最大化最小化和关闭比较简单，调用`windowManager`内部处理窗口的函数即可

自定义`ToggleSidebarSwitchEvent`
`toolbar`组件里`fire`事件，主页面监听信号控制收起展开`Sidebar`