flutter框架container容器对齐方式学习
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);
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/2389/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论