Flutter Stack/Alignment

Flutter Stack/Alignment，Stack组件的每一个子组件要么定位，要么不定位，定位的子组件是用Positioned组件包裹的。Stack组件本身包含所有不定位的子组件，子组件根据alignment属性定位（默认为左上角），然后根据定位的子组件的top、right、bottom和left属性将它们放置在Stack组件上。Stack组件的主要属性如下所示:

采用Alignment方式布局的示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Stack布局示例Alignment',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var stack = Stack(
      // 子组件左上角对齐
      alignment: Alignment.topLeft,
      children: <Widget>[
        // 底部添加一个头像
        CircleAvatar(
          backgroundImage: AssetImage('images/1.jpeg'),
          radius: 100.0,
        ),
        // 上面加一个容器，容器里再放一个文本
        Container(
          decoration: BoxDecoration(
              color: Colors.black38,
          ),
          child: Text(
                     '我是超级飞侠',
              style: TextStyle(
                fontSize: 22.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
          ),
            ),
          ],
        );
        return Scaffold(
          appBar: AppBar(
            title: Text('Stack层叠布局示例'),
          ),
          body: Center(
            child: stack,
          ),
        );
      }
    }

上述示例代码的视图展现大致如图所示，Stack子组件间是层叠关系，所以示例中文本会显示在图片之上。

注意 示例中的图片可以使用之前使用的图片资源。

酷客教程相关文章：

• Flutter 缩放布局
• Flutter 垂直布局
• Flutter 水平布局
• Flutter 对齐布局