先看一下效果圖：

stack.png

一張?jiān)蛨D片上添加一行帶背景的文字。使用Row Widget或者Column Widget是實(shí)現(xiàn)不了的，這時就需要使用Stack Widget，也就是層疊布局來實(shí)現(xiàn)了。
直接上代碼：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Widget'),
          backgroundColor: Colors.deepPurple,
        ),
        body: Center(
          child: Mystack(),
        ),
      ),
    );
  }
}

class Mystack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554199381&di=e3a6604c718d6304e4912f5a7d8e6d2f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.11665.com%2Fimg1_p3%2Fi3%2F1918445441%2FTB20kv.dlDH8KJjSszcXXbDTFXa_%21%211918445441.jpg'),
          radius: 100,
        ),
        Container(
          child: Text(
            '盲僧—李青',
            style: TextStyle(fontSize: 18, color: Colors.white),
          ),
          decoration: BoxDecoration(color: Colors.blueAccent),
          padding: EdgeInsets.fromLTRB(5.0, 0, 5.0, 0),
        )
      ],
      alignment: const FractionalOffset(0.5, 0.9),
    );
  }
}

代碼分析：
Mystack類返回的組件就是Stack()，它同樣需要一個組件數(shù)組。這里我們使用了CircleAvatar和Container。（Container容器組件,Text文本組件）

CircleAvatar組件

CircleAvatar組件經(jīng)常用來作頭像控件，組件里邊有個radius的值可以設(shè)置圖片的弧度。
現(xiàn)在我們準(zhǔn)備放入一個圖像，然后把弧度設(shè)置成100，形成一個漂亮的圓形，代碼如下：

        CircleAvatar(
            backgroundImage: NetworkImage( 'url'),
            radius: 100,
        ),

層疊布局的 alignment 屬性

alignment: const FractionalOffset(0.5, 0.9),
alignment屬性是控制層疊的位置的，建議在兩個內(nèi)容進(jìn)行層疊時使用。它有兩個值X軸距離和Y軸距離，值是從0到1的，都是從上層容器的左上角開始算起的。

Positioned屬性

如果超過兩個組件的層疊，alignment屬性就滿足不了需求了，需要使用Positioned屬性。所以這個組件也叫做層疊定位組件。

• bottom: 距離層疊組件下邊的距離
• left：距離層疊組件左邊的距離
• top：距離層疊組件上邊的距離
• right：距離層疊組件右邊的距離
• width: 層疊定位組件的寬度
• height: 層疊定位組件的高度
  示例代碼：

class Mystack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554199381&di=e3a6604c718d6304e4912f5a7d8e6d2f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.11665.com%2Fimg1_p3%2Fi3%2F1918445441%2FTB20kv.dlDH8KJjSszcXXbDTFXa_%21%211918445441.jpg'),
          radius: 100,
        ),
        Positioned(
            top: 20.0,
            left: 50.0,
            child: Container(
              child: Text(
                '盲僧—李青',
                style: TextStyle(fontSize: 18, color: Colors.white),
              ),
              decoration: BoxDecoration(color: Colors.blueAccent),
              padding: EdgeInsets.fromLTRB(5.0, 0, 5.0, 0),
            )),
        Positioned(
          child: Text(
            '文本組件',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          bottom: 10,
          right: 60,
        )
      ],
//      alignment: const FractionalOffset(0.5, 0.9),
    );
  }
}

效果如圖：

stack2.jpg