Flutter基础学习 13-19 Stack的Positioned属性

前边已经介绍了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),  // 设置主题颜色
    );
  }
}

运行效果如下：

Flutter基础学习 13-19 Stack的Positioned属性

猜你喜欢