flutter框架container容器对齐方式学习

东明兄 2020-11-10
0条评论 2,940 次浏览
东明兄 2020-11-100条评论 2,940 次浏览

container是目前开发中最常用的容器,可以使用alignment来控制container中内容的对齐方式.

简单例子

在container中实现居中:

// 方法一:container.alignment 属性
Container(
    width: 100
    height: 100,
    alignment: Alignment.center,
    child: Text('居中'),
)

// 方法二:Center 包裹内容
Container(
    width: 100,
    height: 100,
    child: Center(
      child: Text('居中'),
    ),
)

如上方写法 ,我们可以直接使用Alignment.center .topLeft .topCenter...等进行定位
在Alignment 内部,实际上是根据坐标进行定位的。topLeft topCenter这些是在在Alignment定义了静态属性以方便我们使用。上方的 alignment: Alignment.center 我们也可以直接在代码中这样写alignment: Alignment(0,0)

坐标图示:

静态变量和坐标写法对应关系:

/// 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);

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注