Flutter-10-Stack层叠布局

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

层叠布局的 alignment 属性：

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

CircleAvatar组件的使用：

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

现在我们准备放入一个图像，然后把弧度设置成100，形成一个漂亮的圆形，代码如下：

new CircleAvatar(
backgroundImage: new NetworkImage(''),
radius: 100.0,
),

效果代码：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.8),
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage(''),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text(''),
)
],
);

  return MaterialApp(
    title:'ListView widget',
    
    home:Scaffold(
      appBar:new AppBar(
        title:new Text('垂直方向布局'),
      ),
      body:Center(child:stack),
    ),
  );

}
}

Positioned属性：

• bottom: 距离层叠组件下边的距离
• left：距离层叠组件左边的距离
• top：距离层叠组件上边的距离
• right：距离层叠组件右边的距离
• width: 层叠定位组件的宽度
• height: 层叠定位组件的高度

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(

    children: <Widget>[
      new CircleAvatar(
        backgroundImage: new NetworkImage(''),
        radius: 100.0,
      ),
      new Positioned(
        top:10.0,
        left:10.0,
        child: new Text(''),
      ),
      new Positioned(
        bottom:10.0,
        right:10.0,
        child: new Text(''),
      )
    ],
  );


  return MaterialApp(
    title:'ListView widget',
    home:Scaffold(
      appBar:new AppBar(
        title:new Text('层叠布局'),
      ),
      body:Center(child:stack),
    ),
  );

}
}