Размещение или выравнивание контейнера Flutter внутри виджета Row

Question

Я новичок в трепете. прямо сейчас изучаю, как позиционировать или выравнивать виджеты. У меня есть два контейнера внутри моего виджета строки. Я хочу установить свой первый контейнер (красный контейнер) вверху слева, а также хочу установить мой второй контейнер (который является синим контейнером) вверху справа. как я могу этого добиться?

вот пример кода:

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
              ),
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Positioned виджет использовать только с Stack виджет, чтобы вы могли решить свою проблему, используя пример ниже, но с Row виджет это может быть невозможно

Stack(children: <Widget>[
            Positioned(
              top: 5,
              left: 5,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
              ),),
            Positioned(
              top: 5,
              right: 5,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),),
          ],
)

Выход:

htt ps:https://stackru.com/images/1a89c1725c2f41d2ef5bbbf94bc277d32df50e94.png

Answer 2

Детонация имеет богатую документацию на макетах, Mr.Tomek Поляньские также объяснить раскладки в деталях.

Вы должны понимать, что такое MainAxisAlignment для строк и столбцов, CrossAxisAlignment,

если вы хотите что - то положение, которое имеет одного ребенка, Использование FittedBox или ConstrainedBox или SizedBox

Поскольку у вас есть несколько детей под капотом ROW Widget CrossAxisAlignment, ваш друг использует его для достижения вашей цели.

1. Оберните свой контейнер в расширенный виджет, который предоставит вам свойство Flex, это поможет вам обеспечить гибкость вашего контейнера. Расширенный виджет также будет полезен для вашего горизонтального и портретного размера экрана.
2. Используйте виджет SizedBox в своих виджетах контейнера, который предоставит вам между невидимым пространственным прямоугольником с максимальной шириной.
3. Я помещаю первый контейнер (красный) как свойство гибкости 1, а также второй контейнер (синий), это означает, что я установил в 1 раз больше размера строки для обоих контейнеров и удвоил размер моего невидимого SizedBox, чтобы наш красный ящик и BlueBox может поместиться в углах вверху слева и вверху справа.

Здесь вы можете увидеть окончательную версию Кодекса.

return Scaffold(
  backgroundColor: Colors.teal,
  body: SafeArea(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.red,
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            width: double.infinity,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
);