Flutter学习第3章 层叠布局的Stack的使用

1、基本结构：使用变量定义组件，然后引入，减少嵌套

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(
              'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b9c96951c5134954611eee64664f92dd/ac6eddc451da81cbdecd521d5c66d01609243133.jpg'
            ),
            radius: 100.0,
          ),
          new Container(
            decoration: new BoxDecoration(
              color: Colors.blueAccent
            ),
            padding: EdgeInsets.all(5.0),
            child:Text('层叠布局')
          )
        ],
    );
        
    return MaterialApp(
      title: "flutter第三章学习 层叠布局",
      home:Scaffold(appBar: new AppBar(
        title: new Text('RowWidget组件学习')
      ),
      //层叠布局
      body: new Center(
        child: stack,
      )
      )
    );
  }
}

2、属性解释

（1）、 alignment: const FractionalOffset(0.5, 0.8) 控制层叠的位置的，取值0~1

效果：