P15. Flutter Stack层叠布局
目录
水平布局和垂直布局确实很好用,但是有一种情况是无法完成的,比如放入一个图片,图片上再写一些字或者放入容器,这时候Row
和Column
就力不从心了,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 的 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), ), ); } }
是不是觉的有了 Stack 层叠布局,我们在 Flutter 中的布局就更加灵活了那。小伙伴们可以动手实现一个你常见的布局效果。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P15. Flutter Stack层叠布局
码云笔记 » P15. Flutter Stack层叠布局