如何检测两行不同宽度Tile列表的空白空间并实现智能插入？

核心思路 #

把每行宽度以25%为单位量化（1单位=25%），每行总单位数固定为4（对应100%宽度），用两个长度为4的数组分别记录两行的单位占用状态。通过追踪已占用位置，识别出空白区间的尺寸，再匹配新Tile的单位需求（25%=1、50%=2、75%=3、100%=4），找到合适的插入位置。

具体实现步骤 #

1. 基础数据结构定义 #

• 用两个布尔数组row1、row2表示两行的单位占用情况，数组元素为true代表该单位已被Tile占用，false代表空白。
• 建立宽度与单位的映射：tileUnitMap = {25: 1, 50: 2, 75: 3, 100: 4}。

2. 空白区间检测 #

对每行执行以下操作：

• 遍历数组，将连续的false元素划分为一个空白区间，记录区间的起始索引和长度（单位数）。
• 示例：若row1 = [true, false, false, true]，则该行的空白区间为{start: 1, length: 2}，对应50%的可用宽度。

3. 新Tile插入逻辑 #

1. 根据新Tile宽度，从映射表中获取所需单位数requiredUnits。
2. 按行优先级（如先第一行后第二行）遍历两行的空白区间：
   • 找到第一个长度≥requiredUnits的空白区间。
   • 从区间起始位置开始，将连续requiredUnits个位置标记为true，完成占用。
   • 若两行均无满足条件的空白区间，返回"空间不足"的提示。

4. 示例流程 #

假设当前布局状态：

• 第一行：1个50%Tile（占用前2单位）→ row1 = [true, true, false, false]
• 第二行：1个25%Tile（占用第1单位）→ row2 = [true, false, false, false]

插入25%Tile：

• 第一行空白区间长度为2，满足1单位需求，插入后row1 = [true, true, true, false]。

插入50%Tile：

• 第一行剩余空白长度为1，不满足需求；第二行空白区间长度为3，满足需求，插入后row2 = [true, true, true, false]。

优化方向 #

• 优先匹配长度刚好等于requiredUnits的空白区间，避免大空间被小Tile占用造成浪费。
• 维护每个Tile对应的行和起始单位索引，方便后续删除或调整Tile时，及时更新行数组的占用状态。

内容的提问来源于stack exchange，提问作者user16916431