Latest news of awtk: new usage of grid control

Grid Control usage

For a long time ,grid All of them just play a semantic role , In function and view No difference . Recently, we changed it to , It can improve development efficiency in many places .

• You can specify the width of different columns . This is not possible in the default child control layout .
• You can draw gridlines . Do it the traditional way , Although it's not impossible , It's also very troublesome .
• Odd and even lines can specify different background colors . Do it the traditional way , It's also very troublesome .

With these features , We can easily achieve the table effect .

because grid It has no scrolling effect , Not suitable for displaying large amounts of data .

1. usage

1.1 Specify the number of lines

Passing attribute rows Specify the number of lines .

1.2 Specify parameters for each column

Passing attribute columns_definition Specify parameters for each column

  /** * @property {char*} columns_definition * @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"] *  Parameters of each column . *  The parameters of each column are separated by semicolons in English  (;)  Separate , The format of each column parameter is ： * * col(w=?,left_margin=?,right_margin=?,top_maorgin=?,bottom_margin=?) * * * w  Is the width of the column （ There must be ）. The value is  (0-1]  In the interval , As  grid  Proportion of control width , Otherwise, the pixel width . * * left_margin（ Optional , It can be abbreviated as  l)  The left margin of the column . * * right_margin（ Optional , It can be abbreviated as  r)  The right margin of the column . * * top_margin（ Optional , It can be abbreviated as  t)  The margin at the top of the column . * * bottom_margin（ Optional , It can be abbreviated as  b)  The margin at the bottom of the column . * * margin（ Optional , It can be abbreviated as  m)  Also specify the above  4  Margins . * */
  char* columns_definition;

1.3 Show grid

• attribute show_grid Set to true.
• stay style It is specified in grid_color The color of the
• stay style It is specified in border_color The color of the

1.4 Odd and even lines have different background colors

• stay style Pass through even_bg_color Specifies the background color for even rows
• stay style Pass through odd_bg_color Specify the background color of odd rows

1.5 Complete example

<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=" full name " />
    <label text=" Chinese language and literature " />
    <label text=" mathematics " />
  </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=" Zhang San " />
    <label text="98" />
    <label text="97" />

    <label text=" Li Si " />
    <label text="98" />
    <label text="97" />

    <label text=" Wang Wu " />
    <label text="98" />
    <label text="97" />

    <label text=" Sun Liu " />
    <label text="98" />
    <label text="97" />

    <label text=" Zhao Qi " />
    <label text="98" />
    <label text="97" />
  </grid>
</window>