前言:水平布局和垂直布局确实很好用,但是有一种情况是无法完成的,比如放入一个图片,图片上再写一些字或者放入容器,这时候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), // 设置主题颜色
);
}
}