sai*_*oue 5 layout alignment dart flutter
Her's a concrete example of using both Positionned Widget and Align Widget! But I had a problem figuring what to use ! though original problem is to set some FABs's Offsets relatively to its Container not to the screen
Stack(
children: <Widget>[
Positioned(left: 0.0, child: Text("Top\nleft")),
Positioned(bottom: 0.0, child: Text("Bottom\nleft")),
Positioned(top: 0.0, right: 0.0, child: Text("Top\nright")),
Positioned(bottom: 0.0, right: 0.0, child: Text("Bottom\nright")),
Positioned(bottom: 0.0, right: 0.0, child: Text("Bottom\nright")),
Positioned(left: width / 2, top: height / 2, child: Text("Center")),
Positioned(top: height / 2, child: Text("Center\nleft")),
Positioned(top: height / 2, right: 0.0, child: Text("Center\nright")),
Positioned(left: width / 2, child: Text("Center\ntop")),
Positioned(left: width / 2, bottom: 0.0, child: Text("Center\nbottom")),
],
)
Example #2 (Using Align in Stack)
Stack(
children: <Widget>[
Align(alignment: Alignment.center, child: Text("Center"),),
Align(alignment: Alignment.topRight, child: Text("Top\nRight"),),
Align(alignment: Alignment.centerRight, child: Text("Center\nRight"),),
Align(alignment: Alignment.bottomRight, child: Text("Bottom\nRight"),),
Align(alignment: Alignment.topLeft, child: Text("Top\nLeft"),),
Align(alignment: Alignment.centerLeft, child: Text("Center\nLeft"),),
Align(alignment: Alignment.bottomLeft, child: Text("Bottom\nLeft"),),
Align(alignment: Alignment.topCenter, child: Text("Top\nCenter"),),
Align(alignment: Alignment.bottomCenter, child: Text("Bottom\nCenter"),),
Align(alignment: Alignment(0.0, 0.5), child: Text("Custom\nPostition", style: TextStyle(color: Colors.red, fontSize: 20.0, fontWeight: FontWeight.w800),),),
],
);
> Blockquot
Run Code Online (Sandbox Code Playgroud)
e
Rém*_*let 15
Positioned
是一种基于偏移的对齐方式,它使用 DP 作为单位Align
使用父尺寸的 %因此,Alignment(0.1, 0.1)
不能使用 表示Positioned
。同样,Align
不能代表 a Positioned(top: 10, left: 10)
。
其次,Positioned
是在不同的流程上。
Stack
可以根据其子代 之一的大小来调整自身大小,不包括Positioned
小部件。
因此,使用Align
vsPositioned
可能会导致Stack
采用不同的大小。
Positioned
can only be used within a Stack
and positions a child relative to the Stack
size.
https://docs.flutter.io/flutter/widgets/Positioned-class.html
Align
将在其父级内尽可能大(或相对于子级的大小,如果heightFactor
,widthFactor
被传递)并将其子级相对于自身定位。Align
可以在任何地方使用,而不仅仅是在Stack
.
https://docs.flutter.io/flutter/widgets/Align-class.html
归档时间: |
|
查看次数: |
2977 次 |
最近记录: |