Flutter基础学习 12-19 Stack层叠布局

版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）

前言：水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了。Flutter为这种情况准备了Stack层叠布局，这里介绍一下。

比如我们现在要作的效果如下： 

 

在头像上方再放入一个容器，容器里边写上字，这时候我们就可以使用Stack布局。 

知识点： 

 一、层叠布局的 alignment 属性

alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。 

二、CircleAvatar组件的使用 

 CircleAvatar这个经常用来作头像的，组件里边有个radius的值可以设置图片的弧度。

三、源码如下：

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  @override
  Widget 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 Container(
            decoration: new BoxDecoration(   //decoration是 container 的修饰器，主要的功能是设置背景和边框。
              color: Colors.blueAccent,
            ),
            padding: EdgeInsets.all(5.0),   //内边距设置5.0
            child:Text('dpl12一个Android小白')
          )
        ],
    );
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('垂直布局'),
          ),
          body:Center(
            child: stack,   //添加层叠布局变量
          )
        ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}