Flutter学习第3章 层叠布局的Stack与Positioned组合使用

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 Positioned(
            top: 10.0,
            left: 10.0,
            child: new Text('www.baidu.com')
          ),
          new Positioned(
            bottom: 10.0,
            right: 10.0,
            child: new Text('www.Flutter.com')
          )
        ],
    );
        
    return MaterialApp(
      title: "flutter第三章学习 层叠布局",
      home:Scaffold(appBar: new AppBar(
        title: new Text('RowWidget组件学习')
      ),
      //层叠布局
      body: new Center(
        child: stack,
      )
      )
    );
  }
}

2、属性解释

（1）Positioned：使用于两个以上的层叠布局，就是解决多个组件层叠定位的问题，与css里的定位非常相似

• left:定位距离左边的值

• top:定位距离上边的值

• right:定位距离右边的值

• bottom:定位距离底部的值

3、效果