DuiEditor简易教程(二)

接上文。

3,设计工具栏。这个工具栏分2部分,左边是工具栏按钮,右边是一个大的logo图片。

选中工具栏这一块的HorizontalLayout,为了方便述说,取名为HC。在HC中插入2个HorizontalLayout子控件,分别取名为HD,HE。

设置HE的属性width=150,在HE中插入一个按钮,给按钮设置bkimage=logo.png。当然也可以不插入按钮而是直接给HE设备背景图片,其实这个按钮的作用是让用户不小心点到时打开公司主页用的,所以还是插入Button,按照范例吧。

duilib设计器 DuiEditor简易教程 (新版DuiDesigner) (二)

选中HD,设置属性inset=“10,0,10,0”,childpadding=10,childValign=vcenter。

在HD中插入一个Option控件,取名为OA,设置width=65,height=62。selectedimage=toolbar_pushed.png,normalimage=toolbar_normal.png,hotimage=toolbar_hover.png,pushedimage=toolbar_pushed.png。

给OA设置foreimage,点开图片选择窗口。选择图片commmon.png,设置dest="10,5,50,45”,上一节中有用到source属性,按字节面意思理解就可以了,在实际应用中这个技巧会经常用到,这里的微调都是可以在设计器窗口实时预览的。

选中OA,设置属性,text="常用",font="0",textpadding=“0,40,0,0”。selected=true,默认第一个是选中的。效果如下图。

duilib设计器 DuiEditor简易教程 (新版DuiDesigner) (二)

剩下的5个option差不多的,可以切换到代码页面,先复制粘贴几个,再回到设计页面调整。

工具栏这部分就完成了。效果如下:

duilib设计器 DuiEditor简易教程 (新版DuiDesigner) (二)

今天就先写到这里了。谢谢。

相关文章:

  • 2022-12-23
  • 2021-04-06
  • 2022-12-23
  • 2021-11-29
  • 2021-04-18
猜你喜欢
  • 2021-09-28
  • 2022-01-29
  • 2022-01-28
  • 2021-09-04
  • 2021-12-26
  • 2022-12-23
相关资源
相似解决方案