博客地址:

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层叠定位组件的更多相关文章

  1. 技术胖Flutter第三季-18布局CardWidget 卡片布局组件

    技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...

  2. 技术胖Flutter第三季-14布局RowWidget的详细讲解

    flutter总的地址: https://jspang.com/page/freeVideo.html 视频地址: https://www.bilibili.com/video/av35800108/ ...

  3. 技术胖Flutter第三季-16Stack层叠布局

    16Stack层叠布局 在上面声明一个变量Stack里面包含两个元素,第一个 是CircleAvater第二个子对象是Container 效果 把文字房子啊中下的位置: 我们需要对齐属性 包含了x轴和 ...

  4. 技术胖Flutter第三季-15垂直布局Column组件

    博客地址: https://jspang.com/post/flutter3.html#toc-8eb 垂直布局 左对齐: crossAxisAlignment: CrossAxisAlignment ...

  5. 技术胖Flutter第四季-19导航父子页面的跳转返回

    技术胖Flutter第四季-19导航父子页面的跳转返回 博客地址: https://jspang.com/post/flutter4.html#toc-010 onPressed是当前按下的时候,按下 ...

  6. 技术胖Flutter第四季-20导航的参数传递和接受-1

    技术胖Flutter第四季-20导航的参数传递和接受-1 视频地址:https://www.bilibili.com/video/av35800108/?p=21 先安装一个新的插件: Awesome ...

  7. 技术胖Flutter第四季-23静态资源和项目图片的处理

    技术胖Flutter第四季-23静态资源和项目图片的处理 视频地址:https://www.bilibili.com/video/av35800108/?p=24 项目中引用图片静态资源文件 这里就是 ...

  8. 技术胖Flutter第四季-21导航的参数传递和接受-2

    21导航的参数传递和接受-2 视频地址 https://www.bilibili.com/video/av35800108/?p=22 博客地址:https://jspang.com/post/flu ...

  9. 技术胖Flutter第四季-22页面跳转并返回数据

    视频地址: https://www.bilibili.com/video/av35800108/?p=23 博客地址: https://jspang.com/post/flutter4.html#to ...

随机推荐

  1. NYOJ 116 士兵杀敌(二)【线段树 单点更新】

    题意:题意非常清楚: 策略:如题. 这道题就是简单的线段树应用,据说还能够用树状数组来做,等我学了之后在说吧. 代码: #include<stdio.h> #include<stri ...

  2. 04 http协议模拟登陆发帖

    <?php require('./http.class.php'); $http = new Http('http://home.verycd.com/cp.php?ac=pm&op=s ...

  3. CI框架常识

    1.有两种方法来加载自定义配置文件(如enums.php): <?php if (! defined('BASEPATH')) exit('No direct script access all ...

  4. VS重置命令:devenv.exe/resetuserdata

    VS命令行下执行下面的命令: devenv.exe/resetuserdata

  5. Proxy Pattern

    1.Proxy Pattern最大的好处就是实现了逻辑和实现的彻底解耦. 2.Proxy Pattern结构图 3.实现 #ifndef _PROXY_H_ #define _PROXY_H_ cla ...

  6. linux下mysql开启二进制日志

    mysql的查询日志,慢查询日志,错误日志,网上的设置方法是正确的.但在二进制日志上设置有问题.正确的设置方法如下, 在/etc/my.cnf文件中[mysqld]下加上: server-id = 1 ...

  7. 简单使用FusionCharts(Free)

    介绍 FusionCharts Free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails ...

  8. ubuntu下安装cpython 0.2x

    Quick installation of cython: Step 1: Update system: sudo apt-get update Step 2: Install: cython Ate ...

  9. 在js里UTF-8与GB2312的互转

    js的函数如下: function GB2312UTF8() { this.Dig2Dec = function(s) { var retV = 0; if (s.length == 4) { for ...

  10. nginx开发_字符串操作函数

    由于ngx_str_t为非NULL结尾的函数,且网络请求中有大量忽略大小写的需求,所以nginx内部封装了许多字符串操作相关的函数,函数名称极其相识,且使用时有有些约定,特此整理. 赋值&拷贝 ...