前边已经介绍了Stack组件，并且进行了两个组件的层叠布局，但是如果是超过两个组件的层叠该如何进行定位那?这就是我们加今天要学的主角Positioned组件了，这个组件也叫做层叠定位组件。
知识点：
Positioned组件的属性：
- bottom: 距离层叠组件下边的距离
- left：距离层叠组件左边的距离
- top：距离层叠组件上边的距离
- right：距离层叠组件右边的距离
- width: 层叠定位组件的宽度
- height: 层叠定位组件的高度
这里修改前边的例子，文字不在放入到container组件里，而是直接放入到Positioned里，并且不再是两个组件，而是三个子组件，我们先来看要实现的效果。
demo源码如下：
import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {var stack=new Stack( //创建Stack层叠布局变量//alignment: const FractionalOffset(0.5, 0.8),//alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。children: <Widget>[new CircleAvatar( //绘制正圆,常用来制作头像backgroundImage: new NetworkImage('https://profile.csdnimg.cn/6/2/3/2_dpl12'),radius: 100.0, //个radius的值可以设置图片的弧度。),new Positioned(top: 10.0,left: 85.0,child: Text('dpl',style:TextStyle(color: Colors.blue,fontSize: 20.0)),),new Positioned(bottom: 10.0,right: 45.0,child: Text('一个Android小白',style:TextStyle(color: Colors.blue,fontSize:15.0)),)],);//返回一个material风格的组件return MaterialApp(title: 'Welcome to Flutter', //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器home: Scaffold( //home ： 应用默认所显示的界面 WidgetappBar: AppBar(title: Text('垂直布局'),),body:Center(child: stack, //添加层叠布局变量)),theme: new ThemeData(primaryColor: Colors.red), // 设置主题颜色);}
}
运行效果如下：
