AWTK 最新動态：Grid 控件新用法

Grid 控件用法

在很長一段時間内，grid 都隻是起到語義上的作用，在功能上和 view 沒有不同。最近我們對它做了以下改成，在不少地方可以提高開發效率。

• 可以指定不同列的寬度。這個在預設子控件布局中是沒法實作的。
• 可以繪制網格線。按傳統方法去做，雖然不是不可能，也是非常麻煩的。
• 奇偶行可以指定不同的背景顔色。按傳統方法去做，也是非常麻煩的。

有了上述這些特性，我們就可以非常友善的實作表格效果。

由于 grid 本身不具有滾動效果，不适合顯示大量資料。

1. 用法

1.1 指定行數

1.2 指定各列的參數

/** 
   * @property {char*} columns_definition
   * @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
   * 各列的參數。
   * 各列的參數之間用英文的分号 (;) 分隔，每列參數的格式為：
   *
   * col(w=?,left_margin=?,right_margin=?,top_maorgin=?,bottom_margin=?)
   *
   * * w 為列的寬度（必須存在）。取值在 (0-1] 區間時，視為 grid 控件寬度的比例，否則為像素寬度。
   * * left_margin（可選，可縮寫為 l) 該列左邊的邊距。
   * * right_margin（可選，可縮寫為 r) 該列右邊的邊距。
   * * top_margin（可選，可縮寫為 t) 該列頂部的邊距。
   * * bottom_margin（可選，可縮寫為 b) 該列底部的邊距。
   * * margin（可選，可縮寫為 m) 同時指定上面 4 個邊距。
   * 
   */
  char* columns_definition;      

1.3 顯示網格

• 屬性 show_grid 設定為 true。
• 在 style 中指定 grid_color 的顔色
• 在 style 中指定 border_color 的顔色

1.4 奇偶行不同背景顔色

• 在 style 中通過 even_bg_color 指定偶數行的背景顔色
• 在 style 中通過 odd_bg_color 指定奇數行的背景顔色

1.5 完整示例

<window>
  <grid x="10" y="10" w="-20" h="30" columns_definition="col(w=0.4,m=5);col(w=0.3,m=5);col(w=0.3,m=5);" rows="1"
    style.normal.grid_color="gray" style.normal.border_color="black" show_grid="true"
    style.normal.bg_color="#a0a0a0">
    <label text="姓名" />
    <label text="國文" />
    <label text="數學" />
  </grid>

  <grid x="10" y="40" w="-20" h="180" columns_definition="col(w=0.4,m=5);col(w=0.3,m=5);col(w=0.3,m=5);" rows="5"
    style.normal.grid_color="gray" style.normal.border_color="black"
    style.normal.odd_bg_color="#f5f5f5" style.normal.even_bg_color="#eeeeee" show_grid="true">
    <label text="張三" />
    <label text="98" />
    <label text="97" />

    <label text="李四" />
    <label text="98" />
    <label text="97" />

    <label text="王五" />
    <label text="98" />
    <label text="97" />

    <label text="孫六" />
    <label text="98" />
    <label text="97" />

    <label text="趙七" />
    <label text="98" />
    <label text="97" />
  </grid>
</window>