Flutter Stack 组件

Stack

Stack 这个是Flutter中布局用到的组件,可以叠加的显示View。

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超出部分还会显示的

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一样大的

 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的右下角为起点开始对齐

  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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容