import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(title: Text("Expanded布局练习"),),
        body: MyStack(),
      ),
    );
  }
}

class MyStack extends StatelessWidget{
  ///在实际开发中,我们需要把文字放到一张图片上,这个时候就需要stack布局
  ///Stack 通常和 Positioned 一起配合使用
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      //alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。
      //所谓部分定位，在这里**特指没有在某一个轴上定位：**left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
      alignment:Alignment.center,
      //此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。
      fit:StackFit.loose,
      //此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会
      overflow:Overflow.clip,
      children: <Widget>[
         Container(
          // decoration: new BoxDecoration(
          //   borderRadius: new BorderRadius.circular(150),
          //   color:Colors.red,
          // ), 
          color: Colors.red,
          width: 300,
          height: 300,
          child: Image.network("https://n.sinaimg.cn/ent/transform/605/w630h775/20190427/Oo5r-hvvuiyp2366853.jpg"),
          
        ),
        Positioned(
          left: 20,
          top: 20,
          child: Icon(Icons.favorite, size: 50, color: Colors.white)
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Text("你好啊，李银河", style: TextStyle(fontSize: 20, color: Colors.white)),
        )
      ],
    );
  }
}

这里的posittioned 就是和CSS里的postions 一样

效果图: