【 OpenHarmony 系统应用源码魔改 】-- Launcher 之「桌面布局定制」

前言

阅读本篇文章之前，有几个需要说明一下：

1. 调试设备：平板，如果你是开发者手机，一样可以加 Log 调试，源码仍然是手机和平板一起分析；
2. 文章中的 Log 信息所显示的数值可能跟你的设备不一样，以你调试的数据为准。
3. 装个逼：目前好像 OH 社区或者其它开发者还没有针对 OH 的系统应用，比如 Launcher 写过非常深入的源码解析类文章，所以此类文章，仅供大家参考学习，如转载或引用，请标明出处！
4. 定制章节会直接定位到修改的地方，如果你不仅想知道怎么改，也想知道为什么这么改，正所谓：知其然知其所以然，探其深方得真谛！
   可以看看 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 这篇文章。

---

定制需求

1. 行数：3
2. 列数：7

---

如果你看过 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 这篇文章的话，应该会清除，Launcher 布局的行、列数是算出来的。

算法：

1. 列数 = ~~（屏幕宽度 + 图标间距）/ （图标大小 + 图标间距）
2. 行数 = ~~（可用高度 + 平均列间距）/ （图标大小 + 平均列间距）

修改代码前，我们先看下默认 Launcher 效果图（平板）：

在 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 文章中，我们已经分析过源码，并且加了 Log 展示了很多数据，例如：

let column = ~~((realWidth + minGutter) / (itemSize + minGutter));

我们看下平板的数据：

pid-1360              I     @@@ pepsimaxin : 桌面布局边距 ==> margin = 82
pid-1360              I     @@@ pepsimaxin : 屏幕宽度 ==> this.mScreenWidth = 1280
com.ohos.launcher     D     @@@ pepsimaxin : realWidth = 1116, minGutter = 6, itemSize = 96
com.ohos.launcher     D     @@@ pepsimaxin : column = 11

OK，现在我们希望把列数改成：7列，那么：

1. realWidth：我们不会动
2. itemSize：图标大小，我们暂时也不动

那么显而易见了，我们只需要修改 minGutter（网格间距）即可！

所以修改成多少呢？-- 这是个基础数学计算问题，不用我教你了。

我们就拿平板为例：

(1116 + 6) / (96 + 6)= 11

我们只需要保证：
(1116 + minGutter) / (96 + minGutter) = 7.00 ~ 7.99 之间即可（因为是向下取整）

我比较懒，直接让 GPT 给我算了下：
minGutter 的取值范围：[49.9 ~ 74]，我们取个整：[50 ~ 74]

现在我们定位到源码里面，看如何修改：

📄 common/src/main/ets/default/viewmodel/LayoutViewModel.ts

calculateDesktop(): any {
  ...
  
  let itemSize = this.mLauncherLayoutStyleConfig.mAppItemSize;
  // 网格间距
  let minGutter = this.mLauncherLayoutStyleConfig.mGridGutter;
  let column = ~~((realWidth + minGutter) / (itemSize + minGutter));
  let userWidth = (realWidth + minGutter - (itemSize + minGutter) * column);
  let gutter = (userWidth / (column - 1)) + minGutter;
  let row = ~~((realHeight + gutter) / (itemSize + gutter));
  ...
  
}

而 minGutter 从哪读取的，就不用我说了吧？

// Phone
mGridGutter = PhonePresetStyleConstants.DEFAULT_APP_LAYOUT_MIN_GUTTER;
static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 5;

// Pad
mGridGutter = PadPresetStyleConstants.DEFAULT_APP_LAYOUT_MIN_GUTTER;
static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 6;

到这里就有两种改法：

1. 要么去对应的 **PresetStyleConstants 里面改 DEFAULT_APP_LAYOUT_MIN_GUTTER 值；
2. 要么暴力点，直接改：

let minGutter = [50 ~ 74] 随便取一个值

---

另外，在 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 文章中我们也讲过，计算出来的 Column 和 Row，都是要传入 this.updateGrid(row, column) 方法，更新网格布局配置的。

所以？你猜我要干什么？更暴力的改法就是：

我不管你怎么算，直接 this.updateGrid(3, 7)

算了，不教你使坏了，我们直接看下修改后的效果：