Как выровнять отдельные виджеты во Flutter?

Question

Я хочу выровнять виджет Flutter внутри его родителя.Я знаю, что могу центрировать виджет, обернув его в виджет Центр.

  Center(
    child: Text("widget"),
  )

Но как мне выровнять его по правому, нижнему, верхнему среднему и т. Д.?

Примечания:

Я имею в виду одного ребенка, а не нескольких детей в строке или столбце.См. Эти вопросы SO:

• Выравнивание текстовых виджетов на виджете в строке
• FLUTTER |Выравнивание по правому краю не работает

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

• Как выровнять по левому краюзначок OutlineButton во флаттере

Это вопрос с ответами на свой вопрос.Мой ответ ниже.

Answer 1

  Expanded(
    child: Align(
      alignment: Alignment.centerRight,
      child: Text("widget"),
    ),
  )

Answer 2

Как выровнять виджеты

Чтобы выровнять дочерний виджет внутри его родителя, вы используете виджет Align.Если вы знаете, как использовать виджет Center, то вы на правильном пути, потому что Center - это особый случай 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

Вот как это выглядит:

Вы не ограничены этими местами.Вы можете выровнять свой виджет где угодно.указав пару x, y, где (0,0) - центр вида, а края - 1.0 вокруг него.Может быть, изображение поможет:

где для любого относительного положения (x,y)

• Alignment.topLeft равно Alignment(-1.0, -1.0)
• Alignment.topCenter is Alignment(0.0, -1.0)
• Alignment.topRight is Alignment(1.0, -1.0)
• Alignment.centerLeft is Alignment(-1.0, 0.0)
• Alignment.center is 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"),
)

Дополнительный код

Вот код main.dart, используемый для создания приведенных выше примеров для удобства вырезания и вставки.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: myLayoutWidget(),
      ),
    );
  }
}

Widget myLayoutWidget() {
  return Align(
    alignment: Alignment(0.7, -0.5),
    child: Text(
      "widget",
      style: TextStyle(fontSize: 30),
    ),
  );
}