概述
Stack 组件是一种层叠式布局,即组件覆盖另一个组件,覆盖的顺序取决于在children中放置的顺序,使用场景比如在图片上加上一些文字描述,即将文本Widget覆盖在图片组件,详见下面的小例。
构造函数
Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, List children = const [], })
- 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: [ 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