Flutter 基礎佈局Widgets之Stack詳解

概述

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,
              ),
            ),
          ),
        ],
      )
    );
  }
}
複製程式碼

例項效果如下