前边已经介绍了Stack
组件,并且进行了两个组件的层叠布局,但是如果是超过两个组件的层叠该如何进行定位那?这就是我们加今天要学的主角Positioned
组件了,这个组件也叫做层叠定位组件。
知识点:
Positioned组件的属性:
- bottom: 距离层叠组件下边的距离
- left:距离层叠组件左边的距离
- top:距离层叠组件上边的距离
- right:距离层叠组件右边的距离
- width: 层叠定位组件的宽度
- height: 层叠定位组件的高度
这里修改前边的例子,文字不在放入到container
组件里,而是直接放入到Positioned里,并且不再是两个组件,而是三个子组件,我们先来看要实现的效果。
demo源码如下:
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 Positioned(
top: 10.0,
left: 85.0,
child: Text('dpl',style:TextStyle(color: Colors.blue,fontSize: 20.0)),
),
new Positioned(
bottom: 10.0,
right: 45.0,
child: Text('一个Android小白',style:TextStyle(color: Colors.blue,fontSize:15.0)),
)
],
);
//返回一个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), // 设置主题颜色
);
}
}
运行效果如下: