两个元素的重叠布局
可以使用stack组件import 'package:flutter/material.dart';
void main(){ runApp(MyApp()); }
class MyApp extends StatelessWidget{ @override var stack = new Stack( alignment: const FractionalOffset(0.5, 0.7), children:
[ new CircleAvatar( backgroundImage: new NetworkImage("https://avatars2.githubusercontent.com/u/41252899?s=460&v=4"), radius: 100.0, ), new Container( decoration: new BoxDecoration( color: Colors.pinkAccent, ), padding: EdgeInsets.all(5.0), child: new Text("ayang"), ) ], ); //使用变量创建重叠的组件，起到减轻代码量的效果 Widget build(BuildContext context){ return MaterialApp( title: "stack层叠布局", home: Scaffold( appBar: new AppBar( title: new Text("stack 层叠布局"), backgroundColor: Colors.pink, ), body: Center( child: stack ), ), ); } }
之前的两个博客分别写了水平布局和纵向布局，这两种布局可以满足很多布局需求了，但是遇到一些组件的堆叠时，还是不能很好的完成任务。这个时候就需要重叠布局(stack)，
在上述代码中我们学到了一个新的方法，就是var 一个变量，为这个变量创建一个组件（我估摸着这个组件可能只有在自己的类里才能被直接使用），在这个变量中我们使用了Stack这个重叠布局组件，在其children这个属性里
创建了一个CircleAvatar组件，对其中设置了backgroundImage属性NetworkImage("")，以及大小属性radius。
创建了一个Container组件，内设文字组件。
两个元素以上的布局
在stack中使用Positioned多重重叠布局
（个人感觉和在row中使用expanded进行布局有相同之处）import 'package:flutter/material.dart';
void main(){ runApp(MyApp()); }
class MyApp extends StatelessWidget{ @override var stack = new Stack( alignment: const FractionalOffset(0.5, 0.7), children:
[ new CircleAvatar( backgroundImage: new NetworkImage("https://avatars2.githubusercontent.com/u/41252899?s=460&v=4"), radius: 100.0, ), new Positioned( top: 10.0, left: 10.0, child: new Text("YFC"), ), new Positioned( bottom: 10.0, right: 10.0, child: new Text("https://ayang818.github.io/"), ) ], ); //使用变量创建重叠的组件，起到减轻代码量的效果 Widget build(BuildContext context){ return MaterialApp( title: "stack层叠布局", home: Scaffold( appBar: new AppBar( title: new Text("stack 层叠布局"), backgroundColor: Colors.pink, ), body: Center( child: stack ), ), ); } }
