26Flutter 布局 Widget —— 层叠布局.pdfVIP

Flutter 布局 Widget —— 层叠 布局 Flutter 的层叠布局是 Stack (https://docs.flutter.io/flutter/widgets/Stack-class.html)，层 叠布局允许 ⼦Widget 堆叠 （按照代码中声明的顺序）,同时 ⼦ Widget 可以根据到⽗容 四个边的位置来确定本身的位置。 Stack Stack 是层叠布局，其 ⼦Widget 会按照添加顺序确定显示层级，后 ⾯添加的会覆盖在前⾯添加的 Widget 上⾯。 代码所在位置 flutter_widget_demo/lib/stack/StackWidget.dart Stack 的快速上⼿ 给 Stack 的 ⼦Widget 添加内容： Stack( children: <Widget>[ Image.asset( "images/flutter.png", width: 00, fit: BoxFit.cover, ), Text('Hello Flutter',style: TextStyle(fontSize: 50.0),), ], ) Stack 在⼀个⻚⾯使⽤的完整 emo 为： import 'package:flutter/material.dart'; void main() => runApp(StackWidget()); class StackWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", theme: ThemeData( primaryColor: Colors.blue, ), home: Scaffold( appBar: AppBar(title: Text("Flutter布局 Widget -- 层叠布局")), body : Stack( children: <Widget>[ Image.asset( "images/flutter.png", width: 00, fit: BoxFit.cover, ), Text('Hello Flutter',style: TextStyle(fontSize: 50.0),), ], ), ), ); } } 运⾏效果为： Stack 的构造函数及参数说明 Stack 的构造函数为： class Stack extends MultiChildRenderObjectWidget { Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow .clip, List<Widget> children = const <Widget>[], }) : super(key : key, children: children); ... } 参数名字 参数类型 意义 key Key Widget 的标识 决定如何对⻬ non-positioned ⼦Widget 和 部分positioned⼦