NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
StackLayout

This is an overview of the most common usage of StackLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for StackLayout.

Контейнер StackLayout собирает в стек дочерние элементы либо по вертикали (по умолчанию), либо по горизонтали.

Примеры

StackLayout по умолчанию

<StackLayout backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" height="70" backgroundColor="#289062"/>
  <Label text="third" height="70" backgroundColor="#1c6b48"/>
</StackLayout>

Горизонтальный StackLayout

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" backgroundColor="#289062"/>
  <Label text="third" width="70" backgroundColor="#1c6b48"/>
</StackLayout>

StackLayout с горизонтально выровненными дочерними элементами

<StackLayout backgroundColor="#3c495e">
  <Label text="left" horizontalAlignment="left"
         width="33%" height="70" backgroundColor="#43b883"/>
  <Label text="center" horizontalAlignment="center"
         width="33%" height="70" backgroundColor="#289062"/>
  <Label text="right" horizontalAlignment="right"
         width="33%" height="70" backgroundColor="#1c6b48"/>
  <Label text="stretch" horizontalAlignment="stretch"
         height="70" backgroundColor="#43b883"/>
</StackLayout>

Горизонтальный StackLayout с вертикально выровненными дочерними элементами

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="top" verticalAlignment="top"
         width="70" height="33%" backgroundColor="#43b883"/>
  <Label text="center" verticalAlignment="center"
         width="70" height="33%" backgroundColor="#289062"/>
  <Label text="bottom" verticalAlignment="bottom"
         width="70" height="33%" backgroundColor="#1c6b48"/>
  <Label text="stretch" verticalAlignment="stretch"
         width="70" backgroundColor="#43b883"/>
</StackLayout>

Свойства

НазваниеТипОписание
orientationStringУказывает направление размещения. Возможные значения: vertical и horizontal. Значение по умолчанию — vertical.

Дополнительные свойства дочерних элементов

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

Contributors