Позиционирование и контейнер Flutter Layouts

внешний интерфейс Flutter

Введение

Container

Это виджет, состоящий из множества виджетов контейнерного класса (DecoratedBox, ConstrainedBox, Transform, Padding, Align и т. д.), поэтому его функцию можно назвать набором функций.

Positioned

Это виджет, расположенный в макете стека, такой же, как в CSS.position:absolute;сходство

Позиционирование контейнера в позиции

Во флаттере контейнер Container по умолчанию обычно занимает все пространство. Что происходит, когда Positioned использует Container?

  • сегмент кода
....
....
 @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Stack(
        children: <Widget>[
          Positioned(
          //主要分析的Container对象
            child: Container(
            //_keyRed 申明为全局变量 GlobalKey _keyRed = GlobalKey();
            //用key绑定Container
              key: _keyRed,
              decoration: BoxDecoration(color: Colors.yellow),
              child: Row(
                children: <Widget>[
                ],
              ),
            ),
          ),
          Positioned(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              MaterialButton(
                elevation: 5.0,
                padding: EdgeInsets.all(15.0),
                color: Colors.grey,
                child: Text("Get Sizes"),
                onPressed: _getSizes,
              ),
              MaterialButton(
                elevation: 5.0,
                color: Colors.grey,
                padding: EdgeInsets.all(15.0),
                child: Text("Get Positions"),
                onPressed: _getPositions,
              ),
            ],
          )),
        ],
      ),
    );
    //获取Positioned中Container渲染位置
  _getPositions() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final positionRed = renderBoxRed.localToGlobal(Offset.zero);
    print("POSITION of Red: $positionRed ");
  }
//获取Positioned中Container大小
  _getSizes() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final sizeRed = renderBoxRed.size;
    print("SIZE of Red: $sizeRed");
  }
  • эффект отображения
    Цвет Контейнера в Positioned желтый, но соответствующий интерфейс не отображается на интерфейсе, потому что Контейнер в это время подобен блочному элементу в HTML, который занимает всю строку, но не имеет высоты.Нажимайте кнопки Получить Sizes и Get Position для вывода позиции контейнера и размера
I/flutter (27566): SIZE of Red: Size(360.0, 0.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 0.0)

Добавить в контейнерheight: 50.0

  • print
I/flutter (27566): SIZE of Red: Size(360.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 0.0)
  • Поместите контейнер на дноbottom:0
    Контейнер снова исчез, плюсbottom:0После позиционирования значения это похоже на абсолютное позиционирование элемента уровня блока в HTML.position:absolute;Значение ширины и высоты по умолчанию равно 0.
  • print
I/flutter (27566): SIZE of Red: Size(0.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 542.0)

Добавьте ширину или добавьте дочерние элементы в контейнер

....
....
//用key绑定Container
  key: _keyRed,
  decoration: BoxDecoration(color: Colors.yellow),
  child: Row(
    children: <Widget>[
        Text('222 '),
        Text('333'),
    ],
  ),
  • print
I/flutter (27566): SIZE of Red: Size(203.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 542.0)

Попробуйте добавить маржу в контейнерmargin: EdgeInsets.only(bottom: 50.0,right: 10.0)

  • print
I/flutter (27566): SIZE of Red: Size(213.0, 100.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 492.0) 
// padding: EdgeInsets.only(top: 50.0,left: 10.0),`
I/flutter (27566): SIZE of Red: Size(213.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 542.0)
  • Значение поля накладывается на ширину и высоту
  • отступы только слева и справа накладываются по ширине

Как сделать ширину контейнера полной и выровнять дно

Выравнивание вместо позиционирования

Align(
    //对齐底部
    alignment: Alignment.bottomCenter,
    child: Container(
      key: _keyRed,
      decoration: BoxDecoration(color: Colors.yellow),
      child: Row(
        children: <Widget>[
          Text('222 '),
          Text('333'),
        ],
      ),
    ),
  ),

Используйте контейнер Align, чтобы сделать ширину контейнера полной, но высота по-прежнему равна 0 по умолчанию, поэтому эффект добавления дочерних элементов следующий:

Суммировать

  • Вы можете использовать функции стека для позиционирования и компоновки, а также идеально использовать соответствующие свойства контейнера. Могут быть и другие более подходящие способы компоновки, добро пожаловать на обсуждение.
  • Для получения статей о размере и положении контейнера перейдите к моему переводу.
  • nuggets.capable/post/684490…
Категории