• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter 中的 Container

Flutter cps12345 2年前 (2020-06-27) 388次浏览 0个评论
Flutter 中的 Container

Flutter 中的 Container

如果您是新手,那么您一定想知道什么是Container,

Container 是一个方便的小部件,它结合了常见的painting,positioning和sizing调整小部件。

您可以对任何窗口小部件使用容器来添加一些样式属性。

让我们看一下容器的参数

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,
})

这里有很多属性,但是不用担心我们可以对所有内容进行排序。

让我们深入研究每个属性。

 

Color :

Center(
  child: Container(
    color: Colors.amber,
  ),
),
Flutter 中的 Container

Child :

我们只能将一个子容器添加到容器中,因为它是单子布局小部件。

Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 400,
    ),
  ),
)
Flutter 中的 Container

Alignment Property:

您可以将AlignmentFractionalOffsetAlignmentDirectional类用于Container中的alignment属性。

Alignment

Alignment中,(0,0)表示屏幕的中心,因此,如果将Alignment(0,0)分配给alignment属性,则它将位于屏幕的中心。

Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 200,
    ),
   alignment: Alignment(0, 0),
  ),
)
Flutter 中的 Container
Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(1.0, 1.0),
)
Flutter 中的 Container
Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(-1.0, -1.0),
)
Flutter 中的 Container
child: Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 200,
    ),alignment: Alignment(1.0, -1.0),
  )
Flutter 中的 Container
Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(-1.0, 1.0),
)
Flutter 中的 Container

 

您可以使用Alignment Class已定义的常量

例如:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment.bottomRight,
)
Flutter 中的 Container

 

还有许多其他常量:

// The top left corner.
static const Alignment topLeft = Alignment(-1.0, -1.0);

// The center point along the top edge.
static const Alignment topCenter = Alignment(0.0, -1.0);

// The top right corner.
static const Alignment topRight = Alignment(1.0, -1.0);

// The center point along the left edge.
static const Alignment centerLeft = Alignment(-1.0, 0.0);

// The center point, both horizontally and vertically.
static const Alignment center = Alignment(0.0, 0.0);

// The center point along the right edge.
static const Alignment centerRight = Alignment(1.0, 0.0);

// The bottom left corner.
static const Alignment bottomLeft = Alignment(-1.0, 1.0);

// The center point along the bottom edge.
static const Alignment bottomCenter = Alignment(0.0, 1.0);

/// The bottom right corner.
static const Alignment bottomRight = Alignment(1.0, 1.0);

FractionalOffset

您也可以将FractionalOffset与Container的alignment属性一起使用。

在FractionalOffset中,(0,0)表示屏幕的左上角,因此,如果将Alignment(0,0)分配给alignment属性,则它将位于屏幕的左上角

FractionalOffset(double dx, double dy)

例如:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: FractionalOffset(0,0),
)
Flutter 中的 Container

 

您可以使用FractionalOffset类已经定义的常量

例如:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: FractionalOffset.topLeft,
)
Flutter 中的 Container

 

还有许多其他常量 :

/// The top left corner.
static const FractionalOffset topLeft = FractionalOffset(0.0, 0.0);

/// The center point along the top edge.
static const FractionalOffset topCenter = FractionalOffset(0.5, 0.0);

/// The top right corner.
static const FractionalOffset topRight = FractionalOffset(1.0, 0.0);

/// The center point along the left edge.
static const FractionalOffset centerLeft = FractionalOffset(0.0, 0.5);

/// The center point, both horizontally and vertically.
static const FractionalOffset center = FractionalOffset(0.5, 0.5);

/// The center point along the right edge.
static const FractionalOffset centerRight = FractionalOffset(1.0, 0.5);

/// The bottom left corner.
static const FractionalOffset bottomLeft = FractionalOffset(0.0, 1.0);

/// The center point along the bottom edge.
static const FractionalOffset bottomCenter = FractionalOffset(0.5, 1.0);

AlignmentDirectional

您还可以将AlignmentDirectional与Container的alignment属性一起使用

AlignmentDirectional(this.start, this.y)

偏移量表示为 Size的一部分,但其水平位置取决于方向顺序。

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: AlignmentDirectional(-1,1),
)
Flutter 中的 Container

您可以使用已经定义的常量AlignmentDirectional类

例如:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: AlignmentDirectional.topEnd,
)
Flutter 中的 Container

还有许多其他常量 :

/// The top corner on the "start" side.
static const AlignmentDirectional topStart = AlignmentDirectional(-1.0, -1.0);

/// The center point along the top edge.
///
/// Consider using [Alignment.topCenter] instead, as it does not need
/// to be [resolve]d to be used.
static const AlignmentDirectional topCenter = AlignmentDirectional(0.0, -1.0);

/// The top corner on the "end" side.
static const AlignmentDirectional topEnd = AlignmentDirectional(1.0, -1.0);

/// The center point along the "start" edge.
static const AlignmentDirectional centerStart = AlignmentDirectional(-1.0, 0.0);

/// The center point, both horizontally and vertically.
///
/// Consider using [Alignment.center] instead, as it does not need to
/// be [resolve]d to be used.
static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);

/// The center point along the "end" edge.
static const AlignmentDirectional centerEnd = AlignmentDirectional(1.0, 0.0);

/// The bottom corner on the "start" side.
static const AlignmentDirectional bottomStart = AlignmentDirectional(-1.0, 1.0);

/// The center point along the bottom edge.
///
/// Consider using [Alignment.bottomCenter] instead, as it does not
/// need to be [resolve]d to be used.
static const AlignmentDirectional bottomCenter = AlignmentDirectional(0.0, 1.0);

/// The bottom corner on the "end" side.
static const AlignmentDirectional bottomEnd = AlignmentDirectional(1.0, 1.0);

Constraint Property:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  alignment: Alignment.center,
  constraints: BoxConstraints(
    maxHeight: 400,
    maxWidth: 400,
    minHeight: 100,
    minWidth: 100,
  ),
)
Flutter 中的 Container

 

Decoration Property:

Decoration Property 是在 Child 后面绘画的。

我们可以使用BoxDecoration类来装饰容器。

要了解有关 BoxDecoration 的更多信息,我在下面链接了一个博客。

Flutter — BoxDecoration Cheat Sheet

Margin Property:

边距是一种属性,用于指定添加空间以包围容器。

我们使用EdgeInsets做到这一点。

EdgeInsets.all

EdgeInsets.all(double value)

例如 :

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),margin: EdgeInsets.all(50),
)
Flutter 中的 Container

EdgeInsets.symmetric

EdgeInsets.symmetric({ double vertical = 0.0,
                           double horizontal = 0.0 })

例如:

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.symmetric(horizontal: 70, vertical: 30),
)
Flutter 中的 Container

EdgeInsets.fromLTRB :

EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)

例如 :

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.fromLTRB(20, 30, 40, 50),
)
Flutter 中的 Container

EdgeInsets.only:

EdgeInsets.only({
  this.left = 0.0,
  this.top = 0.0,
  this.right = 0.0,
  this.bottom = 0.0
});

例如 :

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.only(left: 70, bottom: 50),
)
Flutter 中的 Container

Padding Property :

当我们向小部件添加填充时,我们仅在小部件内部添加空间,而margin则在小部件外部添加空间。

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  padding: EdgeInsets.only(left: 70, bottom: 50),
)

填充前后对比

Flutter 中的 Container

 

EdgeInsets属性将与边距相同.


感谢您阅读本文。

喜欢 (0)

您必须 登录 才能发表评论!