Flutter组件学习（13）层叠布局Stack、Positioned

介绍

层叠布局和Web中的绝对定位、Android中的Frame布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来（按照代码中声明的顺序）

Stack
alignment	决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。 所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴， 只要包含某个轴上的一个定位属性就算在该轴上有定位
textDirection	和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系
fit	用于确定没有定位的子组件如何去适应Stack的大小。 StackFit.loose表示使用子组件的大小， StackFit.expand表示扩伸到Stack的大小
overflow	属性决定如何显示超出Stack显示空间的子组件； 值为Overflow.clip时，超出部分会被剪裁（隐藏） 值为Overflow.visible 时则不会。
Positioned	left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。 width和height用于指定需要定位元素的宽度和高度。 注意，Positioned的width、height 用于配合left、top 、right、 bottom来定位组件， 举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个， 如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理。

 

demo

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text(
            '层叠布局练习',
            style: TextStyle(fontSize: 18, color: Colors.yellow),
          ),
        ),
        body: FlexTest(),
      ),
    );
  }
}

class FlexTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ConstrainedBox(//布局占满屏幕
      constraints: BoxConstraints.expand(),
      child: Container(
        color: Colors.blue,
        child: Stack(
          overflow: Overflow.visible,
          fit: StackFit.loose,
          alignment: Alignment.center, //没有指定定位的控件设置默认居中显示
          children: <Widget>[

            Text("Hello world", style: TextStyle(color: Colors.yellow,fontSize: 30)),

            Positioned(
              top: 30,
              child: Text("Hello world", style: TextStyle(color: Colors.orange,fontSize: 30)),
            ),

            Positioned(
              right: 20,
              child: Text("Hello world", style: TextStyle(color: Colors.red,fontSize: 30)),
            ),
          ],
        ),
      ),
    );
  }
}