Как выровнять виджеты
Чтобы выровнять дочерний виджет в пределах его родителя можно использовать Align
виджет.
Заверните виджет, который необходимо выровнять с виджетом Align и установите его свойство выравнивания. Например, тут текст будет выравниваться в середине справа от родителя.
Align(
alignment: Alignment.centerRight,
child: Text("widget"),
)
Другие варианты
Alignment.topLeft
Alignment.topCenter
Alignment.topRight
Alignment.centerLeft
Alignment.center
Alignment.centerRight
Alignment.bottomLeft
Alignment.bottomCenter
Alignment.bottomRight
Вот как это выглядит:
Вы не ограничены в этих местах. Вы можете выровнять ваш виджет в любом месте, указав х, у в определенном диапазоне. Где (0, 0)
является центром, а (1, 1)
краем. Пример:
Для любого относительного положения (x, y)
:
Alignment.topLeft
это Alignment(-1.0, -1.0)
Alignment.topCenter
это Alignment(0.0, -1.0)
Alignment.topRight
это Alignment(1.0, -1.0)
Alignment.centerLeft
это Alignment(-1.0, 0.0)
Alignment.center
это Alignment(0.0, 0.0)
Alignment.centerRight
это Alignment(1.0, 0.0)
Alignment.bottomLeft
это Alignment(-1.0, 1.0)
Alignment.bottomCenter
это Alignment(0.0, 1.0)
Alignment.bottomRight
это Alignment(1.0, 1.0)
Обратите внимание на изображении, выравнивание (x, y)
не нужно находиться в пределах диапазона [-1, +1]
. Выравнивание (1, 2)
означает, что он находится на правой стороне виджета и ниже виджет в полтора раза больше, чем его высота.
Вот пример позиции пользовательского выравнивания:
Align(
alignment: Alignment(0.7, -0.5),
child: Text("widget"),
)
Источник