技术胖Flutter第三季-17布局PositionedWidget层叠定位组件
博客地址:
https://jspang.com/post/flutter3.html#toc-d7a
把我们上节的 Container的部分代码去掉。
使用:Positioned 有点像css里面的绝对定位。
三个元素以上才使用positioned
这个可以调整left和top的位置。比较灵活
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context){
var stack= new Stack(
alignment: const FractionalOffset(0.5, 0.8),
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('https://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Positioned(
top:10.0,
left:10.0,
child: new Text('JSPang.com'),
),
new Positioned(
bottom: 10.0,
right:10.0,
child: new Text('技术胖'),
)
],
);
return MaterialApp(
title:'Row Widget Demo',
home:Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body:Center(
child: stack,
)
)
);
}
}
全部代码
技术胖Flutter第三季-17布局PositionedWidget层叠定位组件的更多相关文章
- 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...
- 技术胖Flutter第三季-14布局RowWidget的详细讲解
flutter总的地址: https://jspang.com/page/freeVideo.html 视频地址: https://www.bilibili.com/video/av35800108/ ...
- 技术胖Flutter第三季-16Stack层叠布局
16Stack层叠布局 在上面声明一个变量Stack里面包含两个元素,第一个 是CircleAvater第二个子对象是Container 效果 把文字房子啊中下的位置: 我们需要对齐属性 包含了x轴和 ...
- 技术胖Flutter第三季-15垂直布局Column组件
博客地址: https://jspang.com/post/flutter3.html#toc-8eb 垂直布局 左对齐: crossAxisAlignment: CrossAxisAlignment ...
- 技术胖Flutter第四季-19导航父子页面的跳转返回
技术胖Flutter第四季-19导航父子页面的跳转返回 博客地址: https://jspang.com/post/flutter4.html#toc-010 onPressed是当前按下的时候,按下 ...
- 技术胖Flutter第四季-20导航的参数传递和接受-1
技术胖Flutter第四季-20导航的参数传递和接受-1 视频地址:https://www.bilibili.com/video/av35800108/?p=21 先安装一个新的插件: Awesome ...
- 技术胖Flutter第四季-23静态资源和项目图片的处理
技术胖Flutter第四季-23静态资源和项目图片的处理 视频地址:https://www.bilibili.com/video/av35800108/?p=24 项目中引用图片静态资源文件 这里就是 ...
- 技术胖Flutter第四季-21导航的参数传递和接受-2
21导航的参数传递和接受-2 视频地址 https://www.bilibili.com/video/av35800108/?p=22 博客地址:https://jspang.com/post/flu ...
- 技术胖Flutter第四季-22页面跳转并返回数据
视频地址: https://www.bilibili.com/video/av35800108/?p=23 博客地址: https://jspang.com/post/flutter4.html#to ...
随机推荐
- NYOJ 116 士兵杀敌(二)【线段树 单点更新】
题意:题意非常清楚: 策略:如题. 这道题就是简单的线段树应用,据说还能够用树状数组来做,等我学了之后在说吧. 代码: #include<stdio.h> #include<stri ...
- 04 http协议模拟登陆发帖
<?php require('./http.class.php'); $http = new Http('http://home.verycd.com/cp.php?ac=pm&op=s ...
- CI框架常识
1.有两种方法来加载自定义配置文件(如enums.php): <?php if (! defined('BASEPATH')) exit('No direct script access all ...
- VS重置命令:devenv.exe/resetuserdata
VS命令行下执行下面的命令: devenv.exe/resetuserdata
- Proxy Pattern
1.Proxy Pattern最大的好处就是实现了逻辑和实现的彻底解耦. 2.Proxy Pattern结构图 3.实现 #ifndef _PROXY_H_ #define _PROXY_H_ cla ...
- linux下mysql开启二进制日志
mysql的查询日志,慢查询日志,错误日志,网上的设置方法是正确的.但在二进制日志上设置有问题.正确的设置方法如下, 在/etc/my.cnf文件中[mysqld]下加上: server-id = 1 ...
- 简单使用FusionCharts(Free)
介绍 FusionCharts Free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails ...
- ubuntu下安装cpython 0.2x
Quick installation of cython: Step 1: Update system: sudo apt-get update Step 2: Install: cython Ate ...
- 在js里UTF-8与GB2312的互转
js的函数如下: function GB2312UTF8() { this.Dig2Dec = function(s) { var retV = 0; if (s.length == 4) { for ...
- nginx开发_字符串操作函数
由于ngx_str_t为非NULL结尾的函数,且网络请求中有大量忽略大小写的需求,所以nginx内部封装了许多字符串操作相关的函数,函数名称极其相识,且使用时有有些约定,特此整理. 赋值&拷贝 ...