betacode

Руководство Flutter SizedBox

View more Tutorials:

1- SizedBox

В отличие от Container, SizedBox  - это прозрачный контейнер, для которого вы не можете установить стиль (например, цвет фона, поля, отступы и т. д.). Если вы укажете определенный размер для SizedBox, этот размер также будет применяться к его дочернему widget. В противном случае, если ширина SizedBox не задана или равна null, то его дочерний widget будет иметь ширину по своей собственной настройке или равную 0 (если не задано). С высотой тоже имеет сходное поведение.
Все параметры, такие как width, height, size, child, участвующие в создании SizedBox, являются опциональными (необязательными).
Конструкторы​​​​​​​ SizedBox:
SizedBox constructor
const SizedBox(
    {Key key,
    double width,
    double height,
    Widget child}
)
SizedBox.fromSize constructor
SizedBox.fromSize(
    {Key key,
    Widget child,
    Size size}
)
SizedBox.expand constructor
const SizedBox.expand(
    {Key key,
    Widget child}
)
SizedBox.shrink constructor
const SizedBox.shrink(
    {Key key,
    Widget child}
)
Если вы зададите определенный размер для SizedBox с помощью параметров width, height или size, этот размер также будет применяться к его дочернему widget.
Например: Если поместите ElevatedButton в SizedBox с размером 250x100. Этот размер также будет применяться к ElevatedButton:
(ex1)
SizedBox(
    width: 250,
    height: 100,
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
    )
)
Вы также можете создать объект SizedBox с помощью конструктора SizedBox.fromSize:
SizedBox.fromSize (
    size: Size(250, 100),
    child: ElevatedButton(
      child: Text("Button"),
      onPressed: (){},
    )
)
Например: ElevatedButton имеет минимальный размер 200x200, но при размещении в SizedBox заданного размера (например, 250x50) она будет подчиняться размеру SizedBox.
(ex3)
SizedBox (
    width:250,
    height: 50,
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
      style: ElevatedButton.styleFrom(
          shadowColor : Colors.redAccent,
          elevation: 10,
          minimumSize: Size(200,  200 )
      )
    )
)
Другой пример: Если высота SizedBox не указана (или равна null), то высота его дочернего widget будет определяться его собственными настройками, либо она равна 0 (если собственных настроек нет).
(ex4)
SizedBox (
    width:250,
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
      style: ElevatedButton.styleFrom(
          shadowColor : Colors.redAccent,
          elevation: 10,
          minimumSize: Size(200,  200 )
      )
    )
)
Например: Если установите double.infinity (бесконечность) на ширину SizedBox, его ширина будет как можно больше в разрешении родительского widget.
(ex5)
SizedBox (
    width: double.infinity,
    height: 50,
    child: ElevatedButton(
        child: Text("Button "),
        onPressed: (){}
    )
)

2- SizedBox.fromSize

Конструктор SizedBox.fromSize используется для создания SIzedBox с заданным размером с помощью необязательного параметра - size.
SizedBox.fromSize Constructor
SizedBox.fromSize(
    {Key key,
    Widget child,
    Size size}
)
Например:
SizedBox.fromSize (
    size: Size(250, 100),
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
    )
)

3- SizedBox.expand

Конструктор SizedBox.expand используется для создания SizedBox с шириной и высотой double.infinity. Это означает, что размер SizedBox будет как можно больше в разрешении родительского widget.
SizedBox.expand constructor
const SizedBox.expand(
    {Key key,
    Widget child}
)

4- SizedBox.shrink

Конструктор SizedBox.shrink используется для создания SizedBox с наименьшим размером, как это предлагается из родительского widget.
SizedBox.shrink Constructor
const SizedBox.shrink(
    {Key key,
    Widget child}
)
В этом примере у нас есть SizedBox, созданный конструктором SizedBox.shrink, а его родительский widget является ConstrainedBox, который имеет минимальный размер 80x20. SizedBox уменьшит (shrink) свой размер, чтобы наилучшим образом соответствовать минимальному размеру родительского widget.
(ex6)
ConstrainedBox(
    constraints: new BoxConstraints( // Min: 80x20
        minWidth: 80.0,
        minHeight: 20.0
    ),
    child: SizedBox.shrink(
      child: ElevatedButton(
        child: Text('Button'),
        onPressed: () {},
      ),
    )
)
  • TODO Link!

View more Tutorials: