Flutter Stack 组件

赵哥窟

发布于 2019-09-25 15:35:35

9680

发布于 2019-09-25 15:35:35

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,
          ),
        ],
      ),