Flutter基础学习 12-19 Stack层叠布局

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

比如我们现在要作的效果如下: 

 

在头像上方再放入一个容器,容器里边写上字,这时候我们就可以使用Stack布局。 

知识点: 

 一、层叠布局的 alignment 属性

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

二、CircleAvatar组件的使用 

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

三、源码如下:

import 'package:flutter/material.dart';
//主函数(入口函数)
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget:具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    var stack=new Stack(   //创建Stack层叠布局变量
      alignment: const FractionalOffset(0.5, 0.8),//alignment属性是控制层叠的位置的,建议在两个内容进行层叠时使用。
        children: <Widget>[
          new CircleAvatar(   //绘制正圆,常用来制作头像
            backgroundImage: new NetworkImage('https://profile.csdnimg.cn/6/2/3/2_dpl12'),
            radius: 100.0,              //个radius的值可以设置图片的弧度。
          ),
          new Container(
            decoration: new BoxDecoration(   //decoration是 container 的修饰器,主要的功能是设置背景和边框。
              color: Colors.blueAccent,
            ),
            padding: EdgeInsets.all(5.0),   //内边距设置5.0
            child:Text('dpl12一个Android小白')
          )
        ],
    );
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home : 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('垂直布局'),
          ),
          body:Center(
            child: stack,   //添加层叠布局变量
          )
        ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值