Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局。
  • Stack组件

常用于两个子元素。

Stack组件的常用属性:
属性 说明
alignment 配置所有子元素的显示位置
children 子组件

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "StackWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
width: 400,
height: 500,
color: Colors.redAccent,
),
Icon(Icons.account_box,size: 40,color: Colors.white)
],
),
);
}
}

  • Stack组件 结合 Align组件

常用于多个元素。

Align 组件可以独立控制每个子元素的显示位置。

Align组件常用的属性:

属性 说明
alignment 配置所有子元素的显示位置
child 子组件

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "StackWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: 400,
height: 500,
color: Colors.redAccent,
child: Stack(
children: <Widget>[
Align(
child: Icon(Icons.account_box, size: 40, color: Colors.white),
alignment: Alignment.topLeft,
),
Align(
child: Icon(Icons.palette, size: 40, color: Colors.white),
alignment: Alignment.center,
),
Align(
child: Icon(Icons.shopping_cart, size: 40, color: Colors.white),
alignment: Alignment.bottomRight,
)
],
),
),
);
}
}

  • Stack组件 结合 Positioned组件

常用于多个元素。

Positioned 组件可以独立控制每个子元素的显示位置。

Positioned组件的常用属性:

属性 说明
top
子元素距离顶部的距离
bottom
子元素距离底部的距离
left
子元素距离左侧距离
right
子元素距离右侧距离
child
子组件

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "StackWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: 400,
height: 500,
color: Colors.redAccent,
child: Stack(
children: <Widget>[
Positioned(
child: Icon(Icons.account_box, size: 40, color: Colors.white),
top: 10,
),
Positioned(
child: Icon(Icons.palette, size: 40, color: Colors.white),
right: 20,
),
Positioned(
child: Icon(Icons.shopping_cart, size: 40, color: Colors.white),
left: 30,
bottom: 0,
)
],
),
),
);
}
}

Flutter——Stack组件(层叠组件)、Align组件、Positioned组件的更多相关文章

  1. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  2. Flutter学习笔记(18)--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  3. Flutter学习笔记(24)--SingleChildScrollView滚动组件

    如需转载,请注明出处:Flutter学习笔记(23)--多 在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做 ...

  4. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  5. vue组件详解(五)——组件高级用法

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...

  6. C#组件系列———又一款日志组件:Elmah的学习和分享

    前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了“规矩”,今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往,园子里每年这个时候 ...

  7. JS组件系列——两种bootstrap multiselect组件大比拼

    前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...

  8. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. 一步步编写avalon组件01:弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

随机推荐

  1. PHP实现简单留言板

    最近学习了下PHP基础,这里做一个简单的留言板,算是对PHP和MySQL的使用做一个整体的练习吧,不遇到问题总感觉学不到东西. 截图如下: 总结: 1>数据库的简单操作,数据库的增删改查: 2. ...

  2. 单例模式-java

    /** * The MIT License * Copyright (c) 2014-2016 Ilkka Seppälä * <p> * Permission is hereby gra ...

  3. 【c# 学习笔记】接口

    一.什么是接口 接口 可以理解为对一组方法声明进行的同一命名,但这些方法没有提供任何实现.也就是说,把一组方法声明在一个接口中,然后继承于该接口的类都 需要实现这些方法. 例如,很多类型(比如int ...

  4. 【c# 学习笔记】阻止派生类重写虚成员

    使用sealed 关键字可以防止一个类被其他类继承.同样,也可以使用sealed关键字来阻止派生类重写虚成员.如,我们希望Horse的继承类不再具有扩展Voice方法的行为.(上一章链接:https: ...

  5. 实现一个Promise

    实现一个Promise promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pend ...

  6. leetcode1186 Maximum Subarray Sum with One Deletion

    思路: 最大子段和的变体,前后两个方向分别扫一遍即可. 实现: class Solution { public: int maximumSum(vector<int>& arr) ...

  7. python 问题解决:UnicodeEncodeError: 'ascii' codec can't encode character u'\uff08'

    第一种方案(90%情况下,大部分帖子都是这个)一般报错到代码都是自己写到代码,代码上添加 import sysreload(sys)sys.setdefaultencoding('utf-8') 第二 ...

  8. jqGrid获取展示的所有行id集合

    $("#jqGrid").getDataIDs();

  9. c.a.o.c.p.inbound.mysql.rds.RdsBinlogEventParserProxy - prepare to find start position just show master status

    2018-12-27 08:39:49.808 [destination = example , address = /127.0.0.1:3308 , EventParser] WARN c.a.o ...

  10. [知乎]鲲鹏920对比intel8180

    作者:韩朴宇链接:https://www.zhihu.com/question/308298687/answer/568737742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...