P15. Flutter Stack层叠布局

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

层叠布局的 alignment 属性

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

CircleAvatar组件的使用

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

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

new CircleAvatar(
  backgroundImage: new NetworkImage('https://media.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://media.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层叠布局

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://media.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),
      ),
    );
  }
}

Flutter Stack的Positioned属性用法

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P15. Flutter Stack层叠布局

发表评论

提供最优质的资源集合

立即查看 了解详情