flutter text 左对齐_Flutter 基础布局Widgets之Stack详解

概述

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