Flutter——Stack组件(层叠组件)、Align组件、Positioned组件
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组件的更多相关文章
- Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...
- Flutter学习笔记(18)--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
- Flutter学习笔记(24)--SingleChildScrollView滚动组件
如需转载,请注明出处:Flutter学习笔记(23)--多 在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做 ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- vue组件详解(五)——组件高级用法
一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...
- C#组件系列———又一款日志组件:Elmah的学习和分享
前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了“规矩”,今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往,园子里每年这个时候 ...
- JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 一步步编写avalon组件01:弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
随机推荐
- PHP实现简单留言板
最近学习了下PHP基础,这里做一个简单的留言板,算是对PHP和MySQL的使用做一个整体的练习吧,不遇到问题总感觉学不到东西. 截图如下: 总结: 1>数据库的简单操作,数据库的增删改查: 2. ...
- 单例模式-java
/** * The MIT License * Copyright (c) 2014-2016 Ilkka Seppälä * <p> * Permission is hereby gra ...
- 【c# 学习笔记】接口
一.什么是接口 接口 可以理解为对一组方法声明进行的同一命名,但这些方法没有提供任何实现.也就是说,把一组方法声明在一个接口中,然后继承于该接口的类都 需要实现这些方法. 例如,很多类型(比如int ...
- 【c# 学习笔记】阻止派生类重写虚成员
使用sealed 关键字可以防止一个类被其他类继承.同样,也可以使用sealed关键字来阻止派生类重写虚成员.如,我们希望Horse的继承类不再具有扩展Voice方法的行为.(上一章链接:https: ...
- 实现一个Promise
实现一个Promise promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pend ...
- leetcode1186 Maximum Subarray Sum with One Deletion
思路: 最大子段和的变体,前后两个方向分别扫一遍即可. 实现: class Solution { public: int maximumSum(vector<int>& arr) ...
- python 问题解决:UnicodeEncodeError: 'ascii' codec can't encode character u'\uff08'
第一种方案(90%情况下,大部分帖子都是这个)一般报错到代码都是自己写到代码,代码上添加 import sysreload(sys)sys.setdefaultencoding('utf-8') 第二 ...
- jqGrid获取展示的所有行id集合
$("#jqGrid").getDataIDs();
- 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 ...
- [知乎]鲲鹏920对比intel8180
作者:韩朴宇链接:https://www.zhihu.com/question/308298687/answer/568737742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...