11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局
/*
Flutter 页面布局 Stack层叠组件:
Stack与Align Stack与Positioned实现定位布局:
Flutter Stack组件:
Stack表示堆得意思,我们可以用Stack或者Stack结合Align或者Stack结合Positiond来实现页面的定位布局:
alignent 配置所有子元素的显示位置。
children 子组件 Flutter Stack Align
Stack组件中结合Align组件可以控制每个子元素的显示位置。 */
Stack与Align实现定位布局:
效果图:
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Row Column Expanded'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Stack结合align实现布局:
return Center(
child: Container(
width: 300.0,
height: 400.0,
color: Colors.red,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Icon(Icons.home, color: Colors.white,size: ),
),
Align(
alignment: Alignment.center,
child: Icon(Icons.search, color: Colors.white,size: ),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.select_all, color: Colors.white,size: ),
),
],
),
),
);
}
}
Stack与Positioned
效果图:
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Row Column Expanded'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Stack结合align实现布局:
return Center(
child: Container(
width: 300.0,
height: 400.0,
color: Colors.red,
child: Stack(
children: <Widget>[
Positioned(
top: ,
right: ,
child: Icon(Icons.home, color: Colors.white,size: ),
),
Positioned(
top: ,
left: ,
child: Icon(Icons.search, color: Colors.white,size: ),
),
Positioned(
bottom: ,
right: ,
child: Icon(Icons.select_all, color: Colors.white,size: ),
),
], ),
),
);
}
}
11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局的更多相关文章
- Flutter 页面布局 Stack层叠组件
Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局 属性 说明 alignment 配置所有子元素的 ...
- 定位布局 Stack 层叠组件 Stack 与 Align Stack 与 Positioned 实现
一.Flutter Stack 组件 Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局 align ...
- Flutter——Stack组件(层叠组件)、Align组件、Positioned组件
Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局. Stack组件 常用于两个子元素. Stack ...
- Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)
如需转载,请注明出处:Flutter学习笔记(23)--多个子元素的布局Widget(Rwo.Column.Stack.IndexedStack.Table.Wrap) 上一篇梳理了拥有单个子元素布局 ...
- 基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理
在早期的随笔就介绍过,把常规页面的内容拆分为几个不同的组件,如普通的页面,包括列表查询.详细资料查看.新增资料.编辑资料.导入资料等页面场景,这些内容相对比较独立,而有一定的代码量,本篇随笔介绍基于V ...
- Vuejs 页面的区域化与组件封装
组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元 ...
- CSS之定位布局(position,定位布局技巧)
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
- 网页万能排版布局插件,web视图定位布局创意技术演示页
html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...
随机推荐
- springboot中使用cache和redis
知识点:springboot中使用cache和redis (1)springboot中,整合了cache,我们只需要,在入口类上加 @EnableCaching 即可开启缓存 例如:在service层 ...
- Java数组直接选择排序、sort()排序
/** * 1.数组sort()排序 * 2.直接选择排序(两重for循环排序) */ import java.lang.*; import java.lang.reflect.Array; impo ...
- 剑指Offer的学习笔记(C#篇)-- 左旋转字符串
题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...
- 0009SpringBoot静态资源访问路径
访问静态资源: 静态资源需要放在哪些路径下才能被访问呢: 通过WebMvcAutoConfiguration.java中 addResourceHandlers()方法查找绑定的路径,一个是通过web ...
- django2为什么要用序列化
https://www.jianshu.com/p/1e404604d5c3 结论:如果没用序列化,Django默认将数据进行多次转换才能提取我们所需数据,出现关联时我们还需进一步对数据进行查询,操作 ...
- redis安装,以及开机自动启动
tcl安装 # wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz# tar -xzvf tcl8.6.1-src.tar.gz ...
- vue,react,angular三大web前端流行框架简单对比
常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...
- JQuery-UI组件化开发
===================== 页面相关样式及其脚本的引入先后顺序,如下: 1,layout.css 页面的静态基本框架布局样式 2,base.css 页面的静态细节样式 3,ui.css ...
- JQuery 实践--扩展JQuery
Why扩展JQuery通过扩展可以利用JQuery所提供的现有代码基础.避免从头编写代码 有效扩展JQuery的规则扩展JQuery的两种形式: $上直接定义实用工具函数 和JQuery包装集进行操作 ...
- linux 批量创建用户
user 模块添加用户 python -c 'from passlib.hash import sha512_crypt; import getpass; print (sha512_crypt.en ...