1. 基本介绍

Stack、Row、Column 是 Flutter 中最常用的布局组件了，其实在很多别的语言中，也是这三种布局最为常用。但是作为区别，Row、Column 是最通用的 Flex 布局的思想，而 Stack 可以更多的理解为绝对布局组件，可以指定上下左右的约束这种。

Row、和 Column 很早之前就写过了，想了解的可以看这里 -> Flutter入门（8）：Flutter 组件之 Row、Column 详解

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

4. 详解

Stack 相较于 Row 和 Column，他可以使用 Positioned 组件，这个组件可以设置，上下左右以及宽高的约束，完成绝对布局。

4.1 示例代码

import 'package:flutter/material.dart';

class FMStackVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Stack'),
      ),
      body: Container(
        width: 400,
        height: 600,
        color: Colors.grey,
        child: _stack(),
      ),
    );
  }

  Stack _stack(){
    return Stack(
      // alignment: Alignment.topRight,
      // clipBehavior: Clip.none,
      // textDirection: TextDirection.rtl,
      // overflow: Overflow.visible,
      // fit: StackFit.loose,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        ConstrainedBox(
          constraints: BoxConstraints(),
          child: Text("一行文字", style: TextStyle(backgroundColor: Colors.yellow),),
        ),
        _positionedForAll(),
        _positionedForLeftTop(),
        _positionedForClip(),
      ],
    );
  }

  // 四边约束，指定4个边的距离，然后这个 Positioned 会被拉伸，直到边距和设定一致
  Positioned _positionedForAll(){
    return Positioned(
      left: 150,
      top: 150,
      bottom: 10,
      right: 10,
      child: Container(
        color: Colors.cyan,
      ),
    );
  }

  // 位置约束，指定两边位置，设置过大小的 Container 就是绝对定位了
  Positioned _positionedForLeftTop(){
    return Positioned(
      left: 30,
      top: 30,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.yellow,
      ),
    );
  }

  // 超出父控件边界的约束
  Positioned _positionedForClip(){
    return Positioned(
      left: 30,
      top: 500,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.lightGreenAccent,
        alignment: Alignment.bottomCenter,
        child: FlatButton(
          onPressed: (){
            print("Button Clicked");
          },
          child: Text("Button"),
        ),
      ),
    );
  }
}

Stack normal.png

4.2 alignment 对齐方式

使用 alignment 对齐方式，来对没有位置约束的子组件进行约束。

  Stack _stack(){
    return Stack(
      alignment: Alignment.topRight,
      // clipBehavior: Clip.none,
      // textDirection: TextDirection.rtl,
      // overflow: Overflow.visible,
      // fit: StackFit.loose,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        ConstrainedBox(
          constraints: BoxConstraints(),
          child: Text("一行文字", style: TextStyle(backgroundColor: Colors.yellow),),
        ),
        _positionedForAll(),
        _positionedForLeftTop(),
        _positionedForClip(),
      ],
    );
  }

默认	Alignment.topRight
Stack normal.png	Stack topRight.png

4.3 clipBehavior 剪切方式

  Stack _stack(){
    return Stack(
      // alignment: Alignment.topRight,
      clipBehavior: Clip.none,
      // textDirection: TextDirection.rtl,
      // overflow: Overflow.visible,
      // fit: StackFit.loose,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        ConstrainedBox(
          constraints: BoxConstraints(),
          child: Text("一行文字", style: TextStyle(backgroundColor: Colors.yellow),),
        ),
        _positionedForAll(),
        _positionedForLeftTop(),
        _positionedForClip(),
      ],
    );
  }

默认	Clip.none
Stack normal.png	Stack clip none.png

4.4 textDirection 布局方向

  Stack _stack(){
    return Stack(
      // alignment: Alignment.topRight,
      // clipBehavior: Clip.none,
      textDirection: TextDirection.rtl,
      // overflow: Overflow.visible,
      // fit: StackFit.loose,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        ConstrainedBox(
          constraints: BoxConstraints(),
          child: Text("一行文字", style: TextStyle(backgroundColor: Colors.yellow),),
        ),
        _positionedForAll(),
        _positionedForLeftTop(),
        _positionedForClip(),
      ],
    );
  }

默认	TextDirection.rtl
Stack normal.png	Stack rtl.png

4.5 overflow

子控件边缘超出 Stack 边缘的部分是否裁剪，默认为 Overflow.clip

  Stack _stack(){
    return Stack(
      // alignment: Alignment.topRight,
      // clipBehavior: Clip.none,
      // textDirection: TextDirection.rtl,
      overflow: Overflow.visible,
      // fit: StackFit.loose,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        ConstrainedBox(
          constraints: BoxConstraints(),
          child: Text("一行文字", style: TextStyle(backgroundColor: Colors.yellow),),
        ),
        _positionedForAll(),
        _positionedForLeftTop(),
        _positionedForClip(),
      ],
    );
  }

默认	Overflow.visible
Stack normal.png	Stack Overflow visible.png

4.6 fit 填充方式

  Stack _stack(){
    return Stack(
      // alignment: Alignment.topRight,
      // clipBehavior: Clip.none,
      // textDirection: TextDirection.rtl,
      // overflow: Overflow.visible,
      fit: StackFit.expand,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        ConstrainedBox(
          constraints: BoxConstraints(),
          child: Text("一行文字", style: TextStyle(backgroundColor: Colors.yellow),),
        ),
        _positionedForAll(),
        _positionedForLeftTop(),
        _positionedForClip(),
      ],
    );
  }

默认	StackFit.expand
Stack normal.png	StackFit.expand.png

5. 技术小结

• 绝对布局是一种最简单实用的布局方式，可控性非常强。
• Row、Column、Stack 三种掌握了之后基本就可以完成所有的页面排版。