Дневник разработчиков Flutter — подробное объяснение виджета Flutter Layout (часть 1)

Container

1. Введение

Контейнер похож на блочную модель h5, которая эквивалентна контейнеру макета.
Контейнер будет стараться быть достаточно большим, когда у него нет дочерних элементов.
Когда у контейнера есть дочерние узлы, он регулирует свой размер в соответствии с размером дочерних узлов.

2. Конструктор

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
})

Выравнивание: управляет выравниванием дочернего элемента.
padding: заполнение самого контейнера
color: цвет фона контейнера
оформление: стиль контейнера, аналогичный стилю css
foregroundDecoration: цвет переднего плана контейнера, который может скрывать цветовой эффект.
ширина: ширина контейнера
height: высота контейнера
Ограничения: ограничения контейнера, размер ширины и высоты ограничений
margin: внешнее поле самого контейнера
transform: Матрица преобразования контейнера, которая позволяет контейнеру масштабироваться, вращаться, перемещаться и т. д.
дочерний: дочерние элементы управления контейнера

3. Примеры

украшение может добиться эффекта тени и границы

Widget _buildColumn() {
    return Container(
      constraints: BoxConstraints.expand(
        height: 200,
      ),
      padding: EdgeInsets.all(8.0),
      child: Text("Hello World"),
      alignment: Alignment.center,
      transform: Matrix4.identity(),
      margin: EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2.0),
        color: Colors.blue[200],
        borderRadius: BorderRadius.circular(20.0)
      ),
      foregroundDecoration: BoxDecoration(),
      height: 200,
      width: 100,
      //color: Colors.blue[200],
    );
}

Padding

1. Введение

Padding — это элемент управления с одной функцией, отвечающей за заполнение дочерних элементов управления.

2. Конструктор

const Padding({
    Key key,
    @required this.padding,
    Widget child,
})

padding: заполнение элемента управления
ребенок: детский контроль

3. Примеры

Widget _buildColumn() {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Container(
        height: 200,
        width: 200,
        color: Colors.blue[200],
      ),
    );
}

Align

1. Введение

Align может установить выравнивание дочернего элемента, например, по центру, слева, справа и т. д., а также отрегулировать собственный размер в соответствии с размером дочернего элемента.
Когда widthFactor и heightFactor равны нулю, размер дочернего элемента будет пытаться расширить свой собственный размер, пока он не заполнит родительский элемент управления.

2. Конструктор

const Align({
    Key key,
    this.alignment: Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
})

выравнивание: выравнивание ребенка
widthFactor: коэффициент ширины, если установлено значение 2.0, ширина Align будет в два раза больше ширины дочернего элемента.
heightFactor: коэффициент высоты, если установлено значение 2.0, высота Align будет в два раза больше, чем у дочернего элемента.
ребенок: детский контроль

3. Примеры

Поскольку значения heightFactor и widthFactor установлены, это означает, что ширина и высота родительского элемента управления должны быть не более чем в 2,0 раза больше, чем у дочернего элемента управления. Если вы не установите heightFactor и widthFactor, родительский элемент управления будет бесконечным, а дочерний элемент управления будет находиться в середине нижней части экрана.

Widget _buildColumn() {
    return Container(
      color: Colors.blue[200],
      child: Align(
        heightFactor: 2.0,
        widthFactor: 2.0,
        alignment: Alignment(0.0, 1.0), //底部中点对齐
        child: Text("Hello!"),
      ),
    );
}

Center

1. Введение

Центральный элемент управления — это элемент управления, который центрирует дочерний элемент, а положение центрирования — это положение средней точки родительского элемента управления.
Если элемент управления Center задает heightFactor и widthFactor, размер родительского элемента управления изменится.
Элемент управления Center полностью наследуется от элемента управления Align, но по умолчанию будетalignmentсвойство установлено в центре

2. Конструктор

class Center extends Align {
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

3. Примеры

Так как heightFactor и widthFactor установлены, это означает, что ширина и высота родительского элемента управления должны быть не более чем в 1,5 раза больше, чем у дочернего элемента управления, поэтому размер родительского элемента управления составляет 300x300, а дочерний элемент управления будет центрирован на основе родительского контроля. Если не задать heightFactor и widthFactor, то родительский элемент управления будет бесконечно большим и заполнит экран, тогда компонент Center будет отображаться в центре родительского элемента управления, то есть посередине экрана

Widget _buildColumn() {
    return Container(
      color: Colors.blueGrey,
      child: Center(
        heightFactor: 1.5,
        widthFactor: 1.5,
        child: Container(
          height: 200,
          width: 200,
          color: Colors.blue[200],
        ),
      ),
    );
}

FittedBox

1. Введение

FittedBox будет масштабировать и регулировать положение дочернего элемента в пределах своего собственного диапазона размеров, чтобы дочерний элемент соответствовал его размеру.
FittedBox похож на свойство ScaleType ImageView.

2. Конструктор

const FittedBox({
    Key key,
    this.fit: BoxFit.contain,
    this.alignment: Alignment.center,
    Widget child,
})

fit: режим заполнения дочернего элемента управления
выравнивание: выравнивание ребенка
ребенок: детский контроль

образец заполнения

BoxFit.none: по умолчанию нет масштабирования, в зависимости от ширины и высоты дочернего элемента управления, если родительского элемента управления недостаточно для переноски, дочерний элемент управления будет уменьшен, а изображение не будет деформировано.
BoxFit.fill: заполните весь родительский элемент шириной и высотой дочернего элемента, и изображение будет деформировано.
BoxFit.contain: заполните ширину и высоту родительского элемента управления пропорционально ширине и высоте дочернего элемента управления, пока одна сторона не будет заполнена первой, и изображение не будет деформировано.
BoxFit.cover: Используйте ширину и высоту дочернего элемента управления в качестве эталона и поместите его в родительский элемент управления.Если родительского элемента управления недостаточно для переноски, избыточная часть дочернего элемента управления будет обрезана, а изображение не будет деформируется, но будет обрезан
BoxFit.fitWidth: используйте ширину дочернего элемента управления в качестве эталона и помещайте его в родительский элемент управления до тех пор, пока ширина родительского элемента управления не будет заполнена, изображение не будет деформировано, но будет обрезано.
BoxFit.fitHeight: Используйте высоту дочернего элемента управления в качестве эталона, поместите его в родительский элемент управления, пока высота родительского элемента не будет заполнена, изображение не будет деформировано, но будет обрезано.
BoxFit.scaleDown: в зависимости от ширины и высоты родительского элемента управления дочерний элемент управления безоговорочно масштабируется до тех пор, пока его нельзя будет вставить в родительский элемент управления.

3. Примеры

Обычно используется обрезка изображения или обрезка виджета, если виджет имеет фиксированный размер.

Widget _buildColumn() {
    return Container(
      width: 300,
      height: 300,
      color: Colors.blue,
      child: FittedBox(
        fit: BoxFit.cover,
        alignment: Alignment.centerLeft,
        child: Image.asset("images/day27/girl.jpg"),
      ),
    );
}

AspectRatio

1. Введение

AspectRatio — это компонент, который настраивает дочерний элемент на заданное соотношение сторон.
AspectRatio масштабируется пропорционально на основе неуказанной ширины или высоты.

2. Конструктор

const AspectRatio({
    Key key,
    @required this.aspectRatio,
    Widget child
})

аспектRatio: коэффициент масштабирования, 1.0 — начальный коэффициент
ребенок: детский контроль

3. Примеры

Поскольку высота 200 определена, ширина не определена, а коэффициент масштабирования дочернего элемента управления равен 1,5, и, наконец, размер дочернего элемента управления составляет 300 в ширину и 200 в высоту.

Widget _buildColumn() {
    return Container(
      height: 200.0,
      color: Colors.blue,
      child: AspectRatio(
        aspectRatio: 1.5,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
}

ConstrainedBox

1. Введение

ConstrainedBox представляет ограничения для дочерних элементов управления, которые могут ограничивать размер дочерних элементов управления.

2. Конструктор

ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child
})

ограничения: ограничения дочернего элемента управления
ребенок: детский контроль

3. Примеры

Дочерние элементы управления ограничением должны быть не менее 100 x 100 и не более 150 x 150.

Widget _buildColumn() {
    return ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 100.0,
        minHeight: 100.0,
        maxWidth: 150.0,
        maxHeight: 150.0,
      ),
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.red,
      ),
    );
}

Baseline

1. Введение

Элемент управления «Базовая линия» имеет то же значение, что и базовая линия текста, и находится в базовой линии текста.
Если у дочернего элемента есть базовая линия (например, элемент управления Text), отрегулируйте положение дочернего элемента в соответствии со свойством базовой линии дочернего элемента.
Если у дочернего элемента нет базовой линии (например, элемента управления «Контейнер»), отрегулируйте положение дочернего элемента в соответствии с нижней частью дочернего элемента.

2. Конструктор

const Baseline({
  Key key,
  @required this.baseline,
  @required this.baselineType,
  Widget child
})

baseline: базовое значение, сверху вниз
baselineType: базовый тип, алфавитный (выравнивание горизонтальной линии внизу символа) и идеографический (выравнивание горизонтальной линии идеографического символа)
ребенок: детский контроль

3. Примеры

Так как у текста есть атрибут baseline, то из примера видно, что если атрибута baseline нет, то его можно выровнять только по низу дочернего элемента, и текст будет по базовой линии

Widget _buildColumn() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Baseline(
          baselineType: TextBaseline.alphabetic,
          child: Text("Java",style: TextStyle(fontSize: 20.0),),
          baseline: 50.0,
        ),
        Baseline(
          //alphabetic：对齐字符底部的水平线
          //ideographic：对齐表意字符的水平线
          baselineType: TextBaseline.alphabetic,
          child: Container(
            width: 30,
            height: 30,
            color: Colors.blue[200],
          ),
          baseline: 50.0,
        ),
        Baseline(
          baselineType: TextBaseline.alphabetic,
          child: Text("iOS",style: TextStyle(fontSize: 30.0),),
          baseline: 50.0,
        ),
      ],
    );
}

FractionallySizedBox

1. Введение

Элемент управления FractionallySizedBox регулирует размер дочернего элемента в соответствии с существующим пространством.
Если дочерний элемент устанавливает определенное значение размера в элементе управления FractionallySizedBox, он не работает.

2. Конструктор

const FractionallySizedBox({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})

выравнивание: выравнивание ребенка
widthFactor: коэффициент ширины, если установлено значение 0,5, ширина дочернего элемента управления будет составлять половину родительского элемента управления, если установлено значение 1,5, ширина дочернего элемента управления будет в 1,5 раза больше ширины родительского элемента управления.
heightFactor: коэффициент высоты, если установлено значение 0,5, высота дочернего элемента управления будет составлять половину родительского элемента управления, если установлено значение 1,5, высота дочернего элемента управления будет в 1,5 раза больше высоты родительского элемента управления.
ребенок: детский контроль

3. Примеры

Нет необходимости указывать размер дочернего элемента управления,FractionallySizedBoxОграничение размера дочерних элементов управления вдвое меньше размеров родительских элементов управления.

Widget _buildColumn() {
    return Container(
      color: Colors.blue[600],
      width: 200,
      height: 200,
      child: FractionallySizedBox(
        alignment: Alignment.center,
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          color: Colors.blue[200],
        ),
      ),
    );
}

IntrinsicHeight

1. Введение

Элемент управления IntrinsicHeight отрегулирует дочерний элемент до фиксированной высоты.

2. Конструктор

const IntrinsicHeight({ Key key, Widget child })

ребенок: детский контроль

3. Примеры

существуетIntrinsicHeightПоместите четыре контейнера одинаковой ширины в дочерний элемент управления, установите высоту двух из них на 150 и 60, а для двух других установите значение unset.IntrinsicHeightнайдет максимальную высоту, чтобы ограничить остальную часть контейнера

Widget _buildColumn() {
    return IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 40.0,
            height: 150.0,
          ),
          Container(
            color: Colors.red,
            width: 40.0,
            height: 60.0,
          ),
          Container(color: Colors.yellow, width: 40.0),
          Container(color: Colors.yellow, width: 40.0),
        ],
      ),
    );
}

IntrinsicWidth

1. Введение

Внутринсиквидное управление настроит ребенка в фиксированную ширину
Самая большая разница между элементом управления IntrinsicWidth и элементом управления IntrinsicHeight заключается в том, что ширина и высота элемента управления IntrinsicWidth будут ограничены.

2. Конструктор

const IntrinsicWidth({ Key key, this.stepWidth, this.stepHeight, Widget child })

stepWidth: Если это значение равно null, ширина дочернего элемента является максимальной шириной в дочерней коллекции, а минимальная ширина дочернего элемента является указанной шириной stepWidth. Если ширина stepWidth меньше минимальной ширины дочернего элемента, это значение не вступит в силу.
stepHeight: Если это значение null, высота дочернего элемента является максимальной высотой родительского элемента управления. Если это не значение null, максимальная высота дочернего элемента является указанной высотой stepHeight. Если высота stepHeight меньше высоты элемента управления родительский контейнер, это значение не вступит в силу.
ребенок: детский контроль

3. Примеры

Установите для stepHeight значение 200, но высота родительского элемента больше 200, это значение не вступит в силу. Установите для stepWidth значение 150, но максимальная ширина других дочерних элементов управления не превышает 150, тогда минимальная ширина равна 150, то есть серый фон на рисунке

Widget _buildColumn() {
    return Container(
      color: Colors.grey,
      child: IntrinsicWidth(
        //父容器的大小
        stepHeight: 200,
        stepWidth: 150,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              width: 100.0,
              height: 150.0,
            ),
            Container(
              color: Colors.red,
              width: 60.0,
              height: 150.0,
            ),
            Container(color: Colors.yellow, height: 150.0),
            Container(color: Colors.green, height: 150.0),
          ],
        ),
      ),
    );
}

LimitedBox

1. Введение

Элемент управления LimitedBox — это элемент управления, который ограничивает максимальную ширину и высоту дочерних элементов управления.
Существуют определенные условия для элемента управления LimitedBox, чтобы ограничения максимальной ширины и высоты работали.
Если внешняя ширина LimitedBox не ограничена (например, Row, которая имеет определенную высоту и ширину), ширина дочернего элемента ограничивается свойством максимальной ширины (maxWidth) LimitedBox.
Если нет ограничений на внешнюю высоту LimitedBox (например, Column, который представляет собой определенную ширину и определенную высоту), высота дочернего элемента ограничивается свойством максимальной высоты (maxHeight) LimitedBox.

2. Конструктор

const LimitedBox({
  Key key,
  this.maxWidth = double.infinity,
  this.maxHeight = double.infinity,
  Widget child,
})

maxWidth: ограничить максимальную ширину дочерних элементов управления
maxHeight: ограничить максимальную высоту дочерних элементов управления
ребенок: детский контроль

3. Примеры

Поскольку это компонент Row, высота компонента Row определяется, а ширина не ограничена, поэтому ограничение по высоте не работает, ограничение по ширине работает, и, наконец, ширина равна 150, а высота 250.

Widget _buildColumn() {
    return Row(
      children: <Widget>[
        LimitedBox(
          maxHeight: 150, //由于是Row，高度被确定，所以高度限制不起作用
          maxWidth: 150, //由于是Row，宽度不限制，所以宽度限制起作用
          child: Container(
            width: 250,
            height: 250,
            color: Colors.redAccent,
          ),
        )
      ],
    );
}

Offstage

1. Введение

Элемент управления Offstage управляет отображением дочернего элемента через параметры

2. Конструктор

const Offstage({ Key key, this.offstage = true, Widget child })

offstage: когда значение offstage равно true, текущий элемент управления не будет отображаться на экране, событие щелчка не будет реагировать, оно не будет занимать место, в то время как наоборот
ребенок: детский контроль

3. Примеры

Widget _buildColumn() {
    return Offstage(
      offstage: false,
      child: Container(
        width: 250,
        height: 250,
        color: Colors.redAccent,
      ),
    );
}

OverflowBox

1. Введение

Элемент управления OverflowBox ограничит область диапазона, часть, превышающая максимальное значение, будет обрезана, а часть ниже минимального значения будет заполнена.

2. Конструктор

const OverflowBox({
    Key key,
    this.alignment = Alignment.center,
    this.minWidth,
    this.maxWidth,
    this.minHeight,
    this.maxHeight,
    Widget child,
})

выравнивание: выравнивание дочерних элементов управления
minWidth: ограничить минимальную ширину дочерних элементов управления.
maxWidth: ограничить максимальную ширину дочерних элементов управления
minHeight: ограничить минимальную высоту дочерних элементов управления
maxHeight: ограничить максимальную высоту дочерних элементов управления
ребенок: детский контроль

3. Примеры

Дочерние элементы управления должны соответствовать минимальной высоте, поэтому окончательный размер — 300 x 600.

Widget _buildColumn() {
    return OverflowBox(
      minHeight: 600,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blueAccent,
      ),
    );
}

SizedBox

1. Введение

SizedBox — это элемент управления, который устанавливает определенный размер

2. Конструктор

const SizedBox({ Key key, this.width, this.height, Widget child })

width: ширина дочернего элемента управления. Если он установлен, он будет вынужден подстраиваться под эту ширину. Если он не установлен, он будет подстраиваться в соответствии с шириной самого дочернего элемента управления.
height: высота дочернего элемента управления. Если он установлен, он будет принудительно подстраиваться под эту высоту. Если он не установлен, он будет регулироваться в соответствии с высотой самого дочернего элемента управления.
ребенок: детский контроль

3. Примеры

Widget _buildColumn() {
    return SizedBox(
      width: 200,
      height: 200,
      child: Container(
        color: Colors.blueAccent,
      ),
    );
}

SizedOverflowBox

1. Введение

SizedOverflowBox представляет собой комбинацию SizedBox и OverflowBox.
SizeverFlowBox имеет фиксированный размер размера размеров и функцию обрезки переполнения

2. Конструктор

const SizedOverflowBox({
  Key key,
  @required this.size,
  this.alignment = Alignment.center,
  Widget child,
})

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

3. Примеры

Контролируйте размер дочернего элемента до 100x100

Widget _buildColumn() {
    return SizedOverflowBox(
      size: Size(100, 100),
      alignment: Alignment.center,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blueAccent,
      ),
    );
}

Transform

1. Введение

Элемент управления Transform — это элемент управления, который управляет матричным преобразованием дочернего элемента управления.Через матрицу преобразования элемент управления анимируется.

2. Конструктор

const Transform({
  Key key,
  @required this.transform,
  this.origin,
  this.alignment,
  this.transformHitTests = true,
  Widget child,
})

transform: результат матричного преобразования
origin: смещение позиции дочернего элемента управления
выравнивание: выравнивание дочерних элементов управления
transformHitTests: соответственно изменяется ли область щелчка дочернего элемента управления.
ребенок: детский контроль

3. Примеры

Пусть контейнер немного сместится вверх, а затем сделайте эффект вращения на самом себе.

Widget _buildColumn() {
    return Transform(
      origin: Offset(0.0, 10.0),
      transformHitTests: true,
      alignment: Alignment.center,
      transform: Matrix4.rotationZ(3.0),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blueAccent,
      ),
    );
}

CustomSingleChildLayout

1. Введение

Элемент управления CustomSingleChildLayout — это настраиваемый макет с одним дочерним элементом управления.

2. Конструктор

const CustomSingleChildLayout({
  Key key,
  @required this.delegate,
  Widget child
})

делегат: прокси-класс, который управляет дочерними элементами управления
ребенок: детский контроль

3. Примеры

Сначала необходимо создать прокси-класс и использовать переданный параметр Size в качестве ожидаемого размера.Если ожидаемый размер не соответствует размеру текущего дочернего элемента управления, дочерний элемент управления будет переустановлен с новыми ограничениями для адаптации к ожидаемый размер.

class FixedSizeLayoutDelegate extends SingleChildLayoutDelegate {
  FixedSizeLayoutDelegate(this.size);
  // 预期尺寸
  final Size size;

  @override
  Size getSize(BoxConstraints constraints) => size;

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    // 重新设置子控件的约束，让他适应预期Size的尺寸
    return BoxConstraints.tight(size);
  }

  @override
  bool shouldRelayout(FixedSizeLayoutDelegate oldDelegate) {
    // 如果预期尺寸和当前子控件的尺寸不符合，则重新layout
    return size != oldDelegate.size;
  }
}

Поскольку ожидаемый размер — 300x300, текущий размер не соответствует ожидаемому, поэтому размеры дочерних элементов управления будут изменены до ожидаемого размера.

Widget _buildColumn() {
    return CustomSingleChildLayout(
      delegate: FixedSizeLayoutDelegate(Size(300, 300)),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blueAccent,
      ),
    );
}

автор

Hensen_