概述

Stack 組件是一種層疊式布局，即組件覆蓋另一個組件，覆蓋的順序取決于在children中放置的順序，使用場景比如在圖片上加上一些文字描述，即將文本Widget覆蓋在圖片組件，詳見下面的小例。

構造函數

 Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  })

• alignment 子Widgets們的對齊方式
• textDirection 文本的方向，默認當然是 left-to-right
• fit 子Widgets的放置方式，默認loose
• 子Widgets溢出的處理方式

一個簡單的疊加效果：

import 'package:flutter/material.dart';

class StackLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Stack")
      ),
      // 層疊式布局
      body: Stack(
        // 子Widgets們的對齊方式
        alignment: Alignment(1, 1),
        // 文本的方向，默認當然是 left-to-right
        textDirection: TextDirection.ltr,
        // fit 子Widgets的放置方式,默認loose
        fit: StackFit.loose,
        // 子Widgets溢出的處理方式
        overflow: Overflow.visible,
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 90,
            height: 90,
            color: Colors.green,
          ),
          Container(
            width: 80,
            height: 80,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

疊加效果如下：

使用實例

class StackEx extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Stack Example'),
      ),
      body: Stack(
        alignment: const Alignment(0.6, 0.6),
        children: [
          CircleAvatar(
            backgroundImage: NetworkImage('https://avatars1.githubusercontent.com/u/20992063?s=460&v=4'),
            radius: 100,
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.black45,
            ),
            child: Text(
              'RuoData',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ],
      )
    );
  }
}

實例效果如下