【新人入门】【菜单】菜单样式定义

darkannie

还是和之前的差不多，说上一段话：SOUI自己的风格可能不是你想要的，这个时候你需要设置皮肤。
今天说下菜单项的皮肤，看下demo就知道了：

1. <menu ic***kin="skin_small_ic***" itemHeight="26" iconMargin="4" textMargin="8" maxWidth="190" contextHelpId="1" itemSkin="TrayMenu_menu_bkgnd" sepSkin="TrayMenu_menu_sep" >
   
2.   <item id="1" check="1">导出配置</item>
   
3.   <item id="2" radio="1">导入配置</item>
   
4.   <item id="3" disable="1">检查更新</item>
   
5.   <item id="4">更新日志</item>
   
6.   <sep/>
   
7.   <item id="5" text="帮助与反馈" contextHelpId="2">
   
8.     <item id="51" icon="0">访问官网</item>
   
9.     <item id="52" icon="1">帮助指南</item>
   
10.     <item id="53" icon="2">错误提交</item>
    
11.     <item id="54" icon="3">关于SOUI</item>
    
12.   </item>
    
13.   <sep/>
    
14.   <item id="6">退出(&X)</item>
    
15. </menu>

复制代码

上面的是菜单的定义，
contextHelpId="1" 这个是什么，我也不知道，坐等大佬
itemSkin="TrayMenu_menu_bkgnd" 这个就是菜单项的皮肤了，看下他的定义（在skin.xml文件中）：

1. <colorrect name="TrayMenu_menu_bkgnd" normal="#ffffff" hover="#ff0000"/>

复制代码

上面的效果就是鼠标悬浮在菜单项上的时候，菜单项的背景color变成红color（#ff0000就是红color），文本颜color不变，鼠标离开变成正常color，就是白color背景。
文本的颜color怎么改（比如上面的例子，如果不设置hover="#ff0000"，文字就看不到了），就不知道了，还是坐等大佬。
补充下，上面的颜color好像不能用@color的形式（如果你不知道什么事@color的形式，你需要一份入门教程）


这样你就初步完成了一个简单皮肤的定制，更复杂的菜单，以后再讲。。。。。

下午看了下系统的菜单项皮肤是怎么用的，感觉好像还是系统的皮肤好用点，我们照着画就行。
1.还是需要指定菜单项皮肤：

1. itemSkin="skin_menu_test"

复制代码

然后看下这个皮肤的定义：

1. <imgframe name="skin_menu_test" src="PNG:png_menu_test" states="2" left="25" top="2" bottom="2"/>

复制代码

上面的那个定义最好结合 皮肤的那个图片（我的版本是在这个位置：trunk\soui\soui-sys-resource\theme_sys_res\sys_menu_skin.png）看下，这个图片共分成3额区域，并且是不等分的，看下才能理解到底什么意思。
最左边的区域就是25个像素宽度，并且是菜单项左边的背景color，中间的是菜单项normal的背景color，最右边是悬浮的时候的背景颜color。

总的来说不难，并且还能实现个小的定制，把代码抄一遍差不多就懂了（怎么查系统默认菜单项的皮肤，这个直接看菜单项的那个类就行）。

2019.8.5 关于菜单项的研究就到这边，我在demo中见过更加复杂的菜单，等我研究好了再来。


未完待续。。。。

setoutsoft

contextHelpId是用来在回调中识别是哪一个菜单， 一般可以不用管。

darkannie

setoutsoft 发表于 2019-8-5 09:46
contextHelpId是用来在回调中识别是哪一个菜单， 一般可以不用管。

好的，谢谢

lzy

能发一个关于菜单的小demo学习一下吗呜呜