awtk/docs/how_to_set_style_of_combo_box_item.md
2022-07-05 17:10:18 +08:00

2.2 KiB

如何设置下拉选择框 (combo box) 弹出窗口/列表项的样式?

点击下拉选择框的按钮弹出下拉选择框,它是一个独立的 popup 窗口,所以设置样式与普通控件有所不同,之前很多朋友遇到过麻烦。本文详细介绍一下其样式的设置方法。

1. 样式

  • 弹出窗口本身的样式。style 的名称为"combobox_popup",如:
<popup>
  <style name="combobox_popup">
    <normal bg_color="#808080"/>
  </style>
</popup>
  • 列表项的样式。style 的名称为"default",如:
<combo_box_item>
  <style name="default" icon_at="left" text_color="black" bg_color="#f0f0f0">
    <normal  icon="empty" text_color="green"/>
    <focused icon="empty" bg_color="#1296db" text_color="gold" />
    <pressed icon="empty" bg_color="#1296db" text_color="white" />
    <over    icon="empty" bg_color="#1296db" text_color="white" />
    <normal_of_checked  icon="check"/>
    <focused_of_checked  icon="check" bg_color="#1296db" text_color="gold"/>
    <pressed_of_checked icon="check" bg_color="#1296db" text_color="white" />
    <over_of_checked    icon="check" bg_color="#1296db" text_color="white" />
  </style>
</combo_box_item>
  • 扩展下拉选择框中的列表视图和滚动条,使用默认的样式。

2. 样式文件的查找顺序

2.1 普通下拉选择框

  1. styles/combobox_popup

  2. styles/default

2.2 扩展下拉选择框

  1. styles/combobox_ex_popup

  2. styles/default

3. 高级用法

在上面的用法中,所有的下拉选择框,使用相同的样式。在特殊情况下,可能需要为不同的下拉选择框指定不同的样式。此时可以使用下拉选择框的 theme_of_popup 属性,为其指定特别样式文件。如:

<combo_box_ex x="10" y="100" w="200" h="30" options="1;2;3;4;5;6;7;8;9;0;11;22;33;44;55" theme_of_popup="number"/>

也可以调用 API 去设置。如:

combo_box_set_theme_of_popup(combo_box, "number")

在上面的例子中,就会到 styles/number 这个文件中去读取样式数据。

也可以使用当前窗口的样式,将 theme_of_popup 设置为当前窗口的样式(或者名称)。