Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局

1. Stack 组件

Stack 表示堆的意思，用此组件修饰的子组件会“堆”在一起。

常见属性：

1. alignment 对齐方式；

2. children 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 利用Stack的alignment实现定位
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// Stack会将里面的子组件堆叠到一起return Center(child:Stack(// 直接指定方位，共9个// alignment: Alignment.center,// 用数值来表示方位,x和y的值位于-1到1之间// 0,0表示居中显示alignment: Alignment(1,0),children: <Widget>[Container(height:400,width:300,color:Colors.red),Text("这是一个文本",style:TextStyle(fontSize: 20.0,color:Colors.green)), ],));}
}

效果图如下：

2. Stack与Align实现定位

Align组件专用于修饰子组件的对齐方式。

常见属性：

1. alignment 对齐方式；

2. children 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 利用Stack与Align实现多个子组件的定位
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return Center(child:Container(height:400,width:300,color:Colors.red,child:Stack(children: <Widget>[Align(alignment:Alignment.topLeft,child:Icon(Icons.home,size:40,color:Colors.blue)),Align(// 对齐方式也可以使用数值表示alignment: Alignment(0,-1),child:Icon(Icons.search,size:40,color:Colors.white)),Align(alignment: Alignment.topRight,child:Icon(Icons.inbox,size:40,color:Colors.black))],)));}
}

效果图如下：

3. Stack与Postioned实现定位

Positioned组件用于对子组件进行定位。

常见属性：

1. top 子元素距离顶部的距离；

2. bottom 子元素距离底部的距离；

3. left 子元素距离左侧距离；

4. right 子元素距离右侧距离；

5. child 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 利用Stack与Positioned实现多个子组件的定位
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return Center(child:Container(height:400,width:300,color:Colors.red,child:Stack(children: <Widget>[// 位置组件可以定位4个方向的// 一般用两个方位即可Positioned(bottom:0,left:0,child:Icon(Icons.home,size:40,color:Colors.blue)),Positioned(bottom:0,left:130,child:Icon(Icons.search,size:40,color:Colors.white)),Positioned(bottom:0,right:0,child:Icon(Icons.inbox,size:40,color:Colors.black))],)));}
}

效果图如下：

Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局相关推荐

Flutter中Padding、Row 、Column 、Expanded 组件详解
1. Paddiing 组件在 html 中常见的布局标签都可以使用 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属性,这个时候我们可以用 Paddi ...
Flutter中PlatformView组件无法刷新的问题
在Flutter中我们经常使用PlatformView来进行原生组件的绘制,但是倘若使用setState()进行页面刷新时候,虽然页面刷新了,但是PlatformView还是使用的之前的组件.这种情况 ...
Flutter第一部分（UI）第二篇：在Flutter中构建布局
前言:Flutter系列的文章我应该会持续更新至少一个月左右,从User Interface(UI)到数据相关(文件.数据库.网络)再到Flutter进阶(平台特定代码编写.测试.插件开发等),欢迎感 ...
Flutter中那些你需要知道的文本知识！
通过阅读本文,您将了解到文本的组成部分: Flutter对于文本&段落是如何绘制的: 明白Flutter Text 背后的逻辑: 在业务中碰到一些文本显示的问题时,知道从哪些地方去尝试修改. ...
Flutter组件--重叠布局/相对布局(Stack,Positioned组件)
1.Flutter Stack组件 Stack表示堆的意思,我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局属性说明 alignment ...
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
文章目录一.Flutter 组件回顾二.Center 组件三.Wrap 组件四.ClipRRect 组件五.Stack 组件与 Positioned 组件六.按钮组件组合七.完整代码示例 ...
Flutter Stack Align Positioned
Flutter Stack 层叠组件在介绍Stack 层叠组件时,顺便带上Align**和Positioned**,以及组合使用参数详解 Stack 属性说明 alignment 布局定位默认 ...
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
文章目录一.FractionallySizedBox 组件二.Stack 布局组件三.Positioned 组件四. 完整代码示例五. 相关资源一.FractionallySizedBox ...
在Flutter中嵌入Native组件的正确姿势
引言在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局

1. Stack 组件

2. Stack与Align实现定位

3. Stack与Postioned实现定位

Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局相关推荐

最新文章

热门文章