Flutter 基础布局Widgets之Stack详解

129.jpg

概述

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,
          ),
        ],
      ),
    );
  }
}

叠加效果如下：

80C43B7C091089C8A94F3516208B5CD1.png

使用实例

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,
              ),
            ),
          ),
        ],
      )
    );
  }
}

实例效果如下

370CDC25ADDE3DD8C48D1397CAB6638C.png