Умолчанию дочерние элементы управления компоновщик

1. Синтаксис

Дочерние элементы управления компоновщиком единообразно используют атрибут children_layout:

Умолчанию дочерний элемент управления компоновщик => default '(' PARAM_LIST ')'
PARAM_LIST => PARAM | PARAM ',' PARAM_LIST

Пример:

<view x="0" y="0" w="100%" h="100%" children_layout="default(c=2,r=8,m=5,s=5)">

2. Параметры

Умолчанию дочернего элемента управления компоновщика предоставляет следующие параметры:

В коде можно использовать функцию widget_set_children_layout для включения дочернего элемента управления компоновщиком:

/**
 * @method widget_set_children_layout
 * Устанавливает параметры компоновки дочерних элементов.
 * @annotation ["scriptable"]
 * @param {widget_t*} widget Объект виджета.
 * @param {const char*} params Параметры компоновки.
 *
 * @return {ret_t} Возвращает RET_OK в случае успеха, иначе — неудачу.
 */
ret_t widget_set_children_layout(widget_t* widget, const char* params);

Пример:

widget_set_children_layout(w, "default(r=2,c=2)");

В XML можно использовать атрибут children_layout:

  <column x="20" y="160" w="50%" h="60" children_layout="default(r=2,c=1,ym=2,s=10)" >
    <check_button name="c1" text="Book"/>
    <check_button name="c2" text="Food"/>
  </column>

3. Использование

Давайте посмотрим, как настроить параметры rows/cols для достижения различных способов компоновки.

0. По умолчанию

Если параметры дочерних элементов не заданы, используется способ компоновки по умолчанию, родительский элемент ничего не делает, а дочерние элементы полностью определяют свою компоновку.

1. hbox горизонтальная компоновка

Когда rows=1,cols=0, все дочерние элементы располагаются в одну горизонтальную линию, что позволяет реализовать горизонтальную компоновку. Параметры дочерних элементов:

• x Элементы располагаются слева направо, рассчитываются на основе параметров компоновки.
• y Равно y_margin
• w Определяется самим дочерним элементом.
• h Высота родительского элемента минус 2 * y_margin.

Дочернему элементу необходимо самостоятельно определить ширину. Параметр aligh_h может контролировать общий способ выравнивания.

Пример:

<window>
  <view x="c" y="m" w="300" h="30" children_layout="default(r=1,c=0,s=5)">
      <button text="1" w="20%"/>
      <button text="2" w="30%"/>
      <button text="3" w="30%"/>
      <button text="4" w="20%"/>
  </view>
</window>

Например, сохраните файл в текущем каталоге как t.xml и используйте preview_ui (в каталоге awtk\bin), чтобы просмотреть эффект, команда выглядит следующим образом:

 bin\preview_ui.exe t.xml

2. vbox вертикальная компоновка

Когда cols=1,rows=0, все дочерние элементы выстраиваются в вертикальную линию, позволяя реализовать вертикальную компоновку. Параметры дочерних элементов:

• x Равно x_margin
• y Элементы располагаются сверху вниз, рассчитываются на основе параметров компоновки.
• w Ширина родительского элемента минус 2 * x_margin
• h Определяется самим дочерним элементом.

Дочернему элементу необходимо самостоятельно определить высоту.

Пример:

<window>
  <view x="c" y="m" w="80" h="200" children_layout="default(r=0,c=1,s=5)">
      <button text="1" h="20%"/>
      <button text="2" h="30%"/>
      <button text="3" h="30%"/>
      <button text="4" h="20%"/>
  </view>
</window>

Например, сохраните файл в текущем каталоге как t.xml и используйте preview_ui (в каталоге awtk\bin), чтобы просмотреть эффект, команда выглядит следующим образом:

bin\preview_ui.exe t.xml

3. listbox список компоновки

Когда cols=1,rows=N, все дочерние элементы выстраиваются в вертикальную линию, позволяя реализовать компоновку списка. Параметры дочерних элементов:

• x Равно x_margin
• y Элементы располагаются сверху вниз, рассчитываются на основе параметров компоновки.
• w Ширина родительского элемента минус 2 * x_margin
• h Равна высоте родительского элемента (за вычетом полей и отступов), разделённой на N равных частей.

Дочерним элементам не нужно указывать параметры x/y/w/h и т. д.

Пример:

<window>
  <view x="c" y="m" w="200" h="200" children_layout="default(r=4,c=1,s=5)">
      <button text="1" />
      <button text="2" />
      <button text="3" />
      <button text="4" />
  </view>
</window>

Например, сохраните файл в текущем каталоге как t.xml и используйте preview_ui (в каталоге awtk\bin), чтобы просмотреть эффект, команда выглядит следующим образом:

 bin\preview_ui.exe t.xml

4. grid сетка компоновки

Когда cols=M,rows=N, все дочерние элементы размещаются в сетке MxN, позволяя реализовать сетку компоновки.

Дочерним элементам не нужно указывать параметры x/y/w/h и т.д.

Пример:

<window>
  <view x="c" y="m" w="200" h="200" children_layout="default(r=2,c=2,s=5)">
      <button text="1" />
      <button text="2" />
      <button text="3" />
      <button text="4" />
  </view>
</window> **5. Плавающий макет (floating)**

Если для дочернего элемента управления свойство floating установлено в true, он не будет ограничен children_layout:

**Пример:**

  <button text="floating" floating="true" x="c" y="m" w="80" h="30"/>

Например, сохраните файл t.xml в текущем каталоге и используйте preview_ui (в каталоге awtk\bin) для предварительного просмотра эффекта, как показано на рисунке ниже. Команда выглядит следующим образом:

Плавающий макет

4. Расширенное использование

1. Комбинация макета дочерних элементов управления и параметров макета самих дочерних элементов.

Для большей гибкости можно комбинировать параметры макета по умолчанию для дочерних элементов с параметрами макета самого дочернего элемента.

Пример:

<window>
  <view x="c" y="m" w="200" h="200" children_layout="default(r=2,c=2,s=5)">
      <button text="1" x="0" y="0" w="50%" h="50%"/>
      <button text="2" x="r" y="m" w="60%" h="60%"/>
      <button text="3" x="c" y="m" w="70%" h="70%"/>
      <button text="4" x="c" y="m" w="80%" h="80%"/>
  </view>
</window>

Сохраните файл в текущем каталоге как t.xml и используйте preview_ui (в каталоге awtk\bin), чтобы просмотреть эффект, как показано ниже. Команда выглядит так: bin\preview_ui.exe t.xml

2. Когда все параметры макета дочернего элемента (x/y/w/h) указаны в пикселях, необходимо использовать параметр self_layout.

Пример:

<window>
  <view x="c" y="m" w="200" h="200" children_layout="default(r=2,c=2,s=5)">
      <button text="1" self_layout="default(x=0,y=0,w=50,h=50)" />
      <button text="2" x="r" y="m" w="60%" h="60%"/>
      <button text="3" x="c" y="m" w="70%" h="70%"/>
      <button text="4" x="c" y="m" w="80%" h="80%"/>
  </view>
</window>

Сохраните файл как t.xml в текущем каталоге и используйте preview_ui (в каталоге awtk\bin), чтобы предварительно просмотреть эффект, показанный ниже. Команда выглядит следующим образом: bin\preview_ui.exe t.xml

Расширенное использование 2

В папке demos/assets/raw/ui есть примеры, демонстрирующие различные параметры макета.

При выполнении команды предварительного просмотра предполагается, что текущий каталог является корневым каталогом awtk.

В разных платформах способ выполнения команд может немного отличаться, пожалуйста, настройте его самостоятельно.