0
点赞
收藏
分享

微信扫一扫

Flutter 相对布局之Stack

效果

Flutter 相对布局之Stack_Flutter Stack

简介

相对布局,类似于android中的​​RelativeLayout​​​、​​FrameLayout​​​。
既可以相对父容器确定自己的位置,也可以多个widget重叠显示。
​​​Stack​​​与​​Positioned​​搭配使用。

源码

Stack

Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
  • alignment :对齐方式,即没有位置定位的widget的对齐方式,当只有横向定位时,比如​​left​​​有实参,则影响其纵向的对齐方式,再如子widget的​​top​​有值,即纵向定位有效,则影响其横向的对齐方式。
  • fit:没有定位的子widget的大小,默认​​StackFit.loose​​​,使用子widget的大小,​​StackFit.expand​​​则填充​​stack​​。
  • overflow :超出stack的显示方式,默认​​Overflow.clip​​​裁剪,​​Overflow.visible​​超出也显示。

Positioned

const Positioned({
Key key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
})
  • 主要用到​​left​​​、​​top​​​、​​right​​​、​​bottom​​四个参数来定位。

示例

如效果图所示,一个简单的登录界面,顶部的logo和底部的登录button是重叠显示在中间Card之上的。
所以我们大概结构就是一个Stack下有3个​​​child​​​,一个未定位的​​Card​​​,和两个定位的​​Positioned​​。

Stack(alignment: Alignment.topCenter, children: <Widget>[
Container(
margin: EdgeInsets.only(top: 50),
padding: EdgeInsets.all(40),
child: Card(
...
),
),
Positioned(
top: 40,
left: MediaQuery.of(context).size.width / 2 - 35,
child: Center(
...
),
),
Positioned(
bottom: 20,
left: 130,
right: 130,
...
),
]),
  • 第一个就是Container,包裹住Card,主要是内填充和外填充。
  • 第二个就是logo,主要是左边位置是屏幕的一半减去自身的一半。
  • 第三个就是底部登录button了。

具体位置显示还要根据自己需求调试。

Github

​​https://github.com/yechaoa/wanandroid_flutter​​




举报

相关推荐

0 条评论