Stack
Stack 这个是Flutter中布局用到的组件，可以叠加的显示View。
代码语言：javascript复制Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})alignment : 指的是子Widget的对其方式，默认情况是以左上角为开始点 。
fit :用来决定没有Positioned方式时候子Widget的大小，StackFit.loose 指的是子Widget 多大就多大，StackFit.expand使子Widget的大小和父组件一样大
overflow :指子Widget 超出Stack时候如何显示，默认值是Overflow.clip，子Widget超出Stack会被截断，
Overflow.visible超出部分还会显示的
代码语言：javascript复制import 'package:flutter/material.dart';
class StackPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Stack Demo'),
backgroundColor: Colors.blue[400],
),
body: Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 160,
height: 160,
color: Colors.blue,
),
Container(
width: 120,
height:120,
color: Colors.green,
),
],
),
);
}
}
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 16.26.19.png
fit 属性使用
如果指定是StackFit.expand，所有的子组件会和Stack一样大的
代码语言：javascript复制 body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 160,
height: 160,
color: Colors.blue,
),
Container(
width: 120,
height:120,
color: Colors.green,
),
],
),
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 16.28.35.png
显示内容就只最后一个组件，虽然我们给这个组件指定了一个120*120的宽高是不会 生效的，因为我们已经指定了子元素和Stack一样大小，也就是说设置了StackFit.expand，StackFit.expand的效果优先
AlignmentDirectional.bottomEnd 对齐方式
所有的Widget 以Stack的右下角为起点开始对齐
代码语言：javascript复制 body: Stack(
// fit: StackFit.expand,
alignment: AlignmentDirectional.bottomEnd,
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 160,
height: 160,
color: Colors.blue,
),
Container(
width: 120,
height:120,
color: Colors.green,
),
],
),
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 16.30.58.png
AlignmentDirectional.topEnd 对齐方式
所有的Widget 以Stack的右上角为起点开始对齐
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 16.32.08.png
AlignmentDirectional.center 对齐方式
所有的Widget 以Stack的中心位置
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 16.32.42.png
AlignmentDirectional.centerEnd 对齐方式
所有的Widget 在Stack的中心位置并且右边跟stack右边挨着
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 16.33.52.png
