flutter第八文——还是布局组件

这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战

前文回顾

前面提到了脱胎于Flex弹性布局的Column列布局,Row行布局,同时讲了讲Flex布局，都可以通过网页开发的display:flex属性类比去完成理解。

总而言之，言而总之，虽然flutter是基于dart的，但是表现形式大同小异，并且开发都类似于声明式的。所以对有基础的同学比较友好，零基础的小伙伴也能比较简单易上手。

stack层叠布局

先看一波官方教程的描述哦

有配置的属性如图，简单描述下

alignment 设置对齐方式

textDirection 设置文字方向

fit 设置子组件的子组件尺寸

overflow设置溢出处理

class StackDemo extends StatelessWidget {
  const StackDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          color: Colors.red,
          width: 150,
          height: 150,
        ),
        Container(
          color: Colors.green,
          width: 100,
          height: 100,
        )
      ],
    );
  }
}

如图可以看出，写在下面的压在前面的上面。看起来是不是和css的规则超级像的呀，一模一样的吧？好上手加一。

Positioned

positioned布局组件属性如上图，乍一看属性是不是和css的position一毛一样，但是还是有一些不同的。

如图，在vscode中通过ctrl + click查看类时，可以看到，在后面的判断中，可以看到assert(left == null || right == null || width == nunll)这样的一个判断。

这个判断是表示，如果你同时设置了left和width值，会自动计算right值，如果同时设置left、right、width值，将会报错，因为设置同一个方向的值会导致计算时出错（大概）。

Container(
  color: Colors.green,
    width: 100,
    height: 100,
  )
],
Positioned(
  left: 50,
  right: 20,
  top: 30,
  height: 200,
  child: Container(
    color: Colors.yellow,
  ),
)

新增Positioned如上代码， 主要看left和right值，自动计算父容器宽度，与左右间隔值之后，剩下的就是Positioned组件的宽度了。