Flutter Alignment FractionalOffset AlignmentDirectional
  xx2YH4ad7R0N 2023年11月02日 49 0


Alignment
 

const Alignment(this.x, this.y)
: assert(x != null),
assert(y != null);

参数x:-1:最左边 1:最右边 0:中间
参数y:-1:最上边 1:最下边 0:中间

比如:Alignment(0,0)代表控件的中心
坐标系如下图:

Flutter Alignment FractionalOffset AlignmentDirectional_flutter


 

Container(
width: 300,
height: 100,
color: Color(0xFFFF0000),
alignment: Alignment(1,0),
child: Text('Alignment(1,0)',
textDirection: TextDirection.rtl,),
)

效果:

Flutter Alignment FractionalOffset AlignmentDirectional_android_02

 Alignment定义了我们常用的位置:

/// 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继承Alignment,他们2个区别就是坐标系不一样,Alignment的原点是中心,而FractionalOffset原点是左上角。

Flutter Alignment FractionalOffset AlignmentDirectional_控件_03

Container(
width: 300,
height: 100,
color: Color(0xFFFF0000),
alignment: FractionalOffset(0,0),
child: Text('FractionalOffset(0,0)',
textDirection: TextDirection.rtl,),
),

效果:

Flutter Alignment FractionalOffset AlignmentDirectional_android_04


FractionalOffset定义了我们常用的位置:

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

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

AlignmentDirectional

AlignmentDirectional 的坐标系和Alignment比较像,原点在中心,不过AlignmentDirectional的起始位置和书写(TextDirection)方向有关

Flutter Alignment FractionalOffset AlignmentDirectional_android_05

Flutter Alignment FractionalOffset AlignmentDirectional_android_06

 

 

demo:

Container(
width: 300,
height: 100,
color: Color.fromARGB(255, 66, 165, 245),
child: new Text(
"Flutter Cheatsheet",
textDirection: TextDirection.ltr,
style: TextStyle(

),
),
alignment: AlignmentDirectional.topStart,
);

二真机上的效果:

Flutter Alignment FractionalOffset AlignmentDirectional_flutter_07

Flutter Alignment FractionalOffset AlignmentDirectional_flutter_08

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  iD7FikcuyaVi   2023年11月30日   23   0   0 MacWindowsandroid
  b1UHV4WKBb2S   2023年11月13日   33   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   26   0   0 flutterDart
xx2YH4ad7R0N