网格菜单

网格菜单是一个用于显示网格布局的菜单。通过改变不同的 菜单样式， 可以实现不同风格的网格菜单，也支持用户自定义菜单样式。

本章目录
本章正文

属性

PropertyDescription
Menu菜单项列表
Columns菜单项列数
Hex Layout是否六边形布局
Scroll Dir滚动方向
Menu Style菜单样式，支持 网格 满天星 曲线 自定义 样式
Is Snap是否吸附，启用后，滑动菜单松开后，会自动将临近中心位置的菜单项吸附到中心位置
Top Margin顶部边距，菜单项列表拉到顶部时，菜单项距离顶部的距离
Bottom Margin底部边距，菜单项列表拉到底部时，菜单项距离底部的距离
Left Margin左侧边距，菜单项列表拉到左侧时，菜单项距离左侧的距离
Right Margin右侧边距，菜单项列表拉到右侧时，菜单项距离右侧的距离
Friction Factor摩擦系数，控制滑动后的减速速率
Snap Factor吸附系数，控制菜单项吸附到中心位置的速度和强度
Elastic Factor弹性系数，控制滚动到边界时的弹性回弹效果
Out Of Bound Factor溢出系数，控制菜单滑动超出有效范围时的阻尼大小

网格菜单 的 Menu 属性可以选择 在 菜单管理 中配置好的菜单项列表。具体使用参见菜单

样式属性

不同菜单样式，支持的属性不同，具体如下：

  • 网格

  • 满天星

PropertyDescription
Radius球体半径
Distortion Coeff畸变系数
  • 曲线
PropertyDescription
Radius圆弧半径
  • 自定义
PropertyDescription
Nop1自定义属性1
Nop2自定义属性2
Nop3自定义属性3
Nop4自定义属性4

顶部/底部边距

为了使菜单项显示更美观，切好能同时容纳显示指定数量的菜单项，可以根据每个菜单项（图片）的高度以及行间距来计算控件的总高度。计算公式如下：

//非六边形布局
控件高度 = 菜单项高度 × 行数 + 行间距 × (行数 - 1)

//六边形布局
控件高度 = 菜单项高度 × 行数 + （行间距 - 菜单项宽度 × 0.14） × (行数 - 1)

//eg：假设需要同时显示 5 行菜单项，每个菜单项的图片尺寸为 50×50，行间距为 10，则控件的高度为
//非六边形布局
控件高度 = 50 × 5 + 10 × (5 - 1) = 290
//六边形布局
控件高度 = 50 × 5 + （10 - 50 × 0.14） × (5 - 1) = 262

如果要让菜单项列表实现 LV_SCROLL_SNAP_CENTER 效果(垂直滚动)，则需要设置 Head Margin 和 Tail Margin 属性。

//非六边形布局
Head Margin = 菜单项高度 × 行数 / 2 + 行间距 × 行数 / 2 // 行数为奇数
Tail Margin = 菜单项高度 × 行数 / 2 + 行间距 × 行数 / 2 // 行数为奇数

//六边形布局
Head Margin = 菜单项高度 × 行数 / 2 + （行间距 - 菜单项宽度 × 0.14） × 行数 / 2 // 行数为奇数
Tail Margin = 菜单项高度 × 行数 / 2 + （行间距 - 菜单项宽度 × 0.14） × 行数 / 2 // 行数为奇数

//eg：假设需要同时显示 5 行菜单项，每个菜单项的图片尺寸为 50×50，行间距为 10，则控件的高度为
//非六边形布局
Head Margin = 50 × 5 / 2 + 10 × 5 / 2 = 120
Tail Margin = 50 × 5 / 2 + 10 × 5 / 2 = 120
//六边形布局
Head Margin = 50 × 5 / 2 + （10 - 50 × 0.14） × 5 / 2 = 106
Tail Margin = 50 × 5 / 2 + （10 - 50 × 0.14） × 5 / 2 = 106

样式

StylePartDescription
Padding LeftMain左内边距
Padding RightMain右内边距
Padding TopMain上内边距
Padding BottomMain下内边距
Padding RowItems行内边距
Padding ColumnItems列内边距

使用

  • 菜单配置

满天星

  • 控件属性

样式 LV_PART_MAIN 中 圆角裁剪 属性设置为 false。

  • 仿真

网格

  • 控件属性
  • 仿真

曲线

  • 控件属性
  • 仿真