介绍

层叠布局和Web中的绝对定位、Android中的Frame布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来（按照代码中声明的顺序）

Stack

alignment
决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。

所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，

只要包含某个轴上的一个定位属性就算在该轴上有定位

textDirection 和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系

fit
用于确定没有定位的子组件如何去适应Stack的大小。

StackFit.loose表示使用子组件的大小，

StackFit.expand表示扩伸到Stack的大小

overflow
属性决定如何显示超出Stack显示空间的子组件；

值为Overflow.clip时，超出部分会被剪裁（隐藏）

值为Overflow.visible 时则不会。

Positioned

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。

width和height用于指定需要定位元素的宽度和高度。

注意，Positioned的width、height 用于配合left、top 、right、 bottom来定位组件，

举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，

如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理。

demo

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(backgroundColor: Colors.red,title: Text('层叠布局练习',style: TextStyle(fontSize: 18, color: Colors.yellow),),),body: FlexTest(),),);}
}class FlexTest extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ConstrainedBox(//布局占满屏幕constraints: BoxConstraints.expand(),child: Container(color: Colors.blue,child: Stack(overflow: Overflow.visible,fit: StackFit.loose,alignment: Alignment.center, //没有指定定位的控件设置默认居中显示children: <Widget>[Text("Hello world", style: TextStyle(color: Colors.yellow,fontSize: 30)),Positioned(top: 30,child: Text("Hello world", style: TextStyle(color: Colors.orange,fontSize: 30)),),Positioned(right: 20,child: Text("Hello world", style: TextStyle(color: Colors.red,fontSize: 30)),),],),),);}
}

Flutter组件学习（13）层叠布局Stack、Positioned相关推荐

【Flutter组件】层叠布局 Stack、Positioned
层叠布局(Stack)和 Web 中的绝对定位.Android 中的 FrameLayout 布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置.层叠布局允许子组件按照代码中声明的顺序堆 ...
flutter 布局 Stack Positioned的混合操作两个组件Container重叠构建背景圆角操作类似css的relative
flutter 布局 Stack Positioned的混合操作两个组件Container重叠构建背景圆角操作首先看一下需求需要在这里加一个背景圆角,涉及到两个组件Container的重叠我 ...
flutter 层叠布局Stack、Positioned
Flutter中使用Stack和Positioned来实现层叠布局效果 1 Stack Stack({Key? key,this.alignment = AlignmentDirectional.to ...
Flutter 层叠布局 Stack、Positioned
层叠布局和Web中的绝对定位.Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置.绝对定位允许子组件堆叠起来(按照代码中声明的顺序).Flutter中使用St ...
Flutter组件--重叠布局/相对布局(Stack,Positioned组件)
1.Flutter Stack组件 Stack表示堆的意思,我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局属性说明 alignment ...
Flutter层叠布局 Stack、Positioned
Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位.Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置. Stack align ...
Flutter之层叠布局Stack、Positioned
Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位.Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置. 一.属性列表 Sta ...
Flutter组件学习（二）—— Image
序言上一节中,我们讲了 Flutter 中 Text 组件的一些用法以及 API,本节我们继续学习 Flutter 中的 Image 组件,同样先上图: Image组件的构造方法在 Android ...
Flutter组件学习（19）GridView
介绍 GridView和ListView的大多数参数都是相同的,它们的含义也都相同, 唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridV ...

Flutter组件学习（13）层叠布局Stack、Positioned

介绍

Stack

Positioned

Flutter组件学习（13）层叠布局Stack、Positioned相关推荐

最新文章

热门文章

Stack
alignment	决定如何去对齐没有定位（没有使用`Positioned`）或部分定位的子组件。所谓部分定位，在这里特指没有在某一个轴上定位：`left`、`right`为横轴，`top`、`bottom`为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位
textDirection	和`Row`、`Wrap`的`textDirection`功能一样，都用于确定`alignment`对齐的参考系
fit	用于确定没有定位的子组件如何去适应`Stack`的大小。 `StackFit.loose`表示使用子组件的大小， `StackFit.expand`表示扩伸到`Stack`的大小
overflow	属性决定如何显示超出`Stack`显示空间的子组件；值为`Overflow.clip`时，超出部分会被剪裁（隐藏）值为`Overflow.visible` 时则不会。
Positioned	`left`、`top` 、`right`、 `bottom`分别代表离`Stack`左、上、右、底四边的距离。 `width`和`height`用于指定需要定位元素的宽度和高度。注意，`Positioned`的`width`、`height` 用于配合`left`、`top` 、`right`、 `bottom`来定位组件，举个例子，在水平方向时，你只能指定`left`、`right`、`width`三个属性中的两个，如指定`left`和`width`后，`right`会自动算出(`left`+`width`)，如果同时指定三个属性则会报错，垂直方向同理。