跳转到内容

布局编辑器

欢迎使用 BetterLyrics 自定义布局编辑器!通过这个强大的可视化工具,你可以自由设计歌词窗口的排版。无论是调整网格、拖拽组件,还是精细化设置属性,都可以通过直观的交互轻松完成。

布局的基础是 网格系统。你可以将整个歌词窗口想象成一个可以自由划分行和列的表格。

在编辑器的 “画布” 属性面板中,你可以控制整个网格的基础形态:

  • 行列间距:调整全局的行距(Row Spacing)和列距(Column Spacing),让组件之间保持呼吸感。
  • 画布内边距:分别设置画布的上、下、左、右内边距(Padding),控制内容与窗口边缘的距离。

在中间画布区域的 行标题(左侧数字)列标题(顶部数字) 上点击,可以唤出高级设置菜单:

  • 插入与删除:在当前行/列的前面或后面插入新的行/列,或直接删除当前行/列。
  • 调整尺寸:支持精确设置当前行或列的大小,提供三种模式:
    • Auto:根据内部组件的内容自动撑开。
    • *:按比例划分剩余的可用空间。
    • px:设定为固定的像素大小。

界面中包含了 “组件工具箱” 和 “已放置组件” 列表。

  • 待添加组件:这里列出了所有可用的界面元素。只需 按住组件并拖拽 到中间的画布网格中,即可将其放置在对应位置。
  • 已放置组件:这里以列表形式展示了画布上现有的所有组件。点击列表中的项,可以快速在画布中选中它,这在组件相互重叠或被遮挡时非常有用。

当你在画布中点击选中某个组件后,它会被高亮显示(带有白色边框和调整手柄),并自动切换到 “组件” 属性面板。

  • 拖拽移动:直接按住选中的组件并拖动,即可将其移动到新的网格单元格中。
  • 手柄拉伸:拖动组件右侧、底部或右下角的调整手柄,可以快速改变它占据的行数和列数。
  • 精确数值:你也可以在属性面板中,手动输入 起始行起始列跨行数跨列数
  • 固定尺寸:可将组件的宽度和高度在 Auto(自适应)和 px(固定像素)之间切换并指定数值。
  • 外边距:设置组件的上、下、左、右外边距(Margin),用于微调它在网格单元格内的精确位置。
  • 对齐方式:支持水平(左、中、右、拉伸)和垂直(顶、中、底、拉伸)对齐方式,决定组件如何在单元格内停靠。

为了方便编辑复杂的布局,编辑器提供了一系列视图和历史控制功能:

  • 抓手工具:点击顶部工具栏的手掌图标激活。激活后,拖动画布即可自由平移视角。
  • 缩放控制:使用顶部放大镜图标调整画布比例,或点击“重置缩放”让画布自动适应当前可用空间。
  • 导航小地图 (Minimap):当画布放大且超出当前窗口可视区域时,右下角会自动悬浮一个小地图。拖动小地图中的高亮方块,可以快速跨越画布大范围移动视角。
  • 撤销与重做:编辑器会自动记录你的每一步修改,支持使用快捷键随时撤销错误操作。

熟练使用快捷键可以大幅提升你的布局搭建效率。按下 F1Ctrl + / 可以随时在编辑器内唤出快捷键帮助菜单。

操作快捷键
临时激活抓手工具长按 空格键
缩放画布Ctrl + 鼠标滚轮
水平滚动Shift + 鼠标滚轮
撤销 (Undo)Ctrl + Z
重做 (Redo)Ctrl + YCtrl + Shift + Z
操作快捷键
选择下一个组件Tab
选择上一个组件Shift + Tab
聚焦到选中组件F
移动选中组件方向键 或 W A S D
改变组件跨度(大小)Shift + 方向键 或 W A S D
删除选中组件DeleteBackspace
取消选中Esc