继承关系:
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Stack
构造方法:
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
代码示例:
层布局中alignment属性,控制Stack子组件对齐方式。以下代码中罗列了三类对齐方式:AlignmentDirectional、AlignmentDirectional(x,y)、FractionalOffset。代码中顺带展示了CircleAvatar的使用,这个可以展示圆形图片。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stack = new Stack(
// alignment: AlignmentDirectional.bottomCenter, // alignment:子组件对齐方式 系统默认
// alignment: const FractionalOffset(0.5, 0.9), //自己指定Stack子组件对齐 ,只对Stack中有两个子View生效。0.5表示x轴,0.9表示y轴(FractionalOffset 0.5,0.5表示中心)
//AlignmentDirectional x、y 偏移量取值范围为 [-1,1],如果 x 的偏移量大于 0,则表示向右偏移,小于 0 则向左偏移;如果 y 轴的偏移量大于 0 则向下偏移,小于 0 则向上偏移。
alignment: AlignmentDirectional(0, 0), //AlignmentDirectional 0,0表示在正中心。
fit: StackFit.loose,
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage("https://dwz.cn/JUbcbckN"),
// radius 数值超过屏幕显示时,会呈椭圆形显示。
radius: 120.0, // CircleAvatar 的半径 Flutter中的长\宽\半径 都是小数点后一位
),
new Positioned(
// Positioned 使层叠布局的子View,指定位置
child: CircleAvatar(
backgroundImage: NetworkImage("https://dwz.cn/dEcFWygO"),
radius: 25.0,),
top: 70.0, //随意调整
left: 30.0, //随意调整
),
new Container(
decoration: BoxDecoration(
color: Colors.orangeAccent,
),
child: Text("万磁王"),
padding: EdgeInsets.all(3.0),
),
],
);
return MaterialApp(
title: "List",
home: Scaffold(
appBar: new AppBar(
title: new Text("GridView"),
),
body: Center(
child: stack,
),
),
);
}
}
展示效果:
图片和文字是层叠展示,代码先执行的在底层,这个和Android原生的FrameLayout一样。
Positioned 可以指定精确绝对职位,让万磁王手持 X 勋章! (X系列中,万磁王最有资格获得勋章!)