Flutter组件学习六-页面布局 Stack 层叠组件

Flutter 页面布局 Stack 层叠组件使用，Stack 和Align、Stack和Positioned结合使用

1、Stack组件

1.1、属性

属性	说明
alignment	配置所有子元素的显示位置
children	子组件

1.2、代码实现

import 'package:flutter/material.dart';

class MyStackView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      //文本显示在中间
      //alignment: Alignment(0,0),
      //文本显示在水平中间，垂直上边
      alignment: Alignment(0,-1),
      children: <Widget>[
        Container(
          height: 400,
          width: 300,
          color: Colors.red,
        ),
        Text("hello flutter"),
      ],
    );
  }
}

2、Stack 和 Align结合使用

2.1、属性

属性	说明
alignment	配置所有子元素的显示位置
child	子组件

2.2、代码实现

//Stack 和 Align 结合使用，实现一个容器中上放2个图标。分别在不同的位置上
class MyStackAndAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.red,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.home,size: 30,color: Colors.white,),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Icon(Icons.send,size: 30,color: Colors.yellow,),
          ),
        ],
      ),
    );
  }
}

3、Stack 和 Positioned 结合使用

3.1、属性

属性	说明
child	子组件
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左侧距离
right	子元素距离右侧距离

3.2、代码实现

//Stack 和 Positioned 结合使用，控制每个子元素的位置
class StackAndPositionedView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.red,
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 10,
            child: Icon(Icons.home,size: 30,color: Colors.white,),
          ),
          Positioned(
            top: 100,
            left: 100,
            child: Icon(Icons.send,size: 30,color: Colors.yellow,),
          ),
        ],
      ),
    );
  }
}