P15. Flutter Stack层叠布局

水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了，Flutter 为这种情况准备了Stack层叠布局。

层叠布局的 alignment 属性

alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值 X 轴距离和 Y 轴距离，值是从 0 到 1 的，都是从上层容器的左上角开始算起的。

CircleAvatar 组件的使用

CircleAvatar这个经常用来作头像的，组件里边有个radius的值可以设置图片的弧度。

现在我们准备放入一个图像，然后把弧度设置成 100，形成一个漂亮的圆形，代码如下：

new CircleAvatar(
  backgroundImage: new NetworkImage('https://mybj123.com/wp-content/uploads/2021/03/1616051944-7e3cbdfbc059e26.jpg'),
  radius: 100.0,
),

效果代码

想布局出这个效果还是比较容易的，代码如下：

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      var stack = Stack(
        alignment: const FractionalOffset(0.5, 0.8),
        children: [
          CircleAvatar(
            backgroundImage: new NetworkImage('https://mybj123.com/wp-content/uploads/2021/03/1616051944-7e3cbdfbc059e26.jpg'),
            radius: 100.0,
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.lightBlue,
            ),
            padding: EdgeInsets.all(5.0),
            child: Text('码云笔记 Mybj'),
          )
        ],
      );

      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body:Center(child:stack),
        ),
      );
  }
}

效果如下：

Stack 的 Positioned 属性

上面我们已经学习了Stack组件，并且进行了两个组件的层叠布局，但是如果是超过两个组件的层叠该如何进行定位呢？这就是我们接下来要学的主角Positioned组件了。这个组件也叫做层叠定位组件。

Positioned 组件的属性

• bottom: 距离层叠组件下边的距离
• left：距离层叠组件左边的距离
• top：距离层叠组件上边的距离
• right：距离层叠组件右边的距离
• width: 层叠定位组件的宽度
• height: 层叠定位组件的高度

Demo 实例

修改上节课的例子，文字不在放入到container组件里，而是直接放入到Positioned里，并且不再是两个组件，而是三个子组件，代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      children: [
        CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://mybj123.com/wp-content/uploads/2021/03/1616051944-7e3cbdfbc059e26.jpg'),
          radius: 100.0,
        ),
        Positioned(
          top: 10.0,
          left: 10.0,
          child: Text('mybj123.com'),
        ),
        Positioned(
          bottom: 10.0,
          right: 10.0,
          child: Text('码云笔记'),
        )
      ],
    );

    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('垂直方向布局'),
        ),
        body: Center(child: stack),
      ),
    );
  }
}

是不是觉的有了 Stack 层叠布局，我们在 Flutter 中的布局就更加灵活了那。小伙伴们可以动手实现一个你常见的布局效果。

以上关于P15. Flutter Stack层叠布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。