Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Center( // widthFacto…

1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组件 2.Layout 布局…

DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), cent…

Padding: 内边距Widget,与CSS中的padding相似. import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Padd…

Flutter 有着丰富的布局控件库 . Flutter 中的布局整体分为 Single-child layout widget (单子布局部件) Multi-child layout widget (多子布局部件) 本篇我们将开始学习单子布局部件 . 类似于 Android 学习中有五大布局, 可是到实际开发中 , 用到的最多的只有线性布局.相对布局.帧布局. Flutter 布局单子部件官网学习文档列就有 18 种 , 在实际开发中未必能全用到 . 为了节省学习成本 , 各位童鞋可先重点掌握…

SizedOverflowBox: 子组件在超出SizedOverflowBox指定的宽高时,不会隐藏,依然进行绘制 OverflowBox: 限制子组件的宽高. import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:…

FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父控件的比例.注意设置FractionallySizedBox宽高后,其子组件设置的宽高将不起作用 import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget bui…

SizedBox: 两种用法:一是可用来设置两个widget之间的间距,二是可以用来限制子组件的大小. import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: tru…

Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Container( alig…

AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class AuthList extends StatefulWidget { @override _AuthListState createState() => _AuthListState(); } class _AuthListState extends State<AuthList> { // 方…

1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置.Stacks是基于Web开发中的绝度定位(absolute positioning )布局模型设计的.使用Stack可以使用alignment属性alignment: const Alignment(0.5, 0.0) 这是自由定义偏移的位置,横向纵向都是从-1.0–1.0当然也可…

记得flutter出来的时候,官方推荐的是使用IntelliJ IDEA,当时个人尝试了一下,比较麻烦,整个过程比较漫长. 进入2018年,再去看的时候,官方推荐使用Android Studio和VS code.我选择了使用Android Studio,整个过程相当惊喜,就是按钮那么一点,整个过程和配置就完成了,不过前提是你要先安装Dart和Flutter的插件. 下面对整个使用过程做一个简单的记录! 一.创建 创建完成后,整体的架子如下所示: image.png 蓝色框,即lib下的main.…

版本号0.1.54 看源码之前,我先去看下官方文档,对于其源码的设计说明,文中所说的原生都是指android 看完官方文档的说明,我有以下几个疑问 第一个:容器是怎么设计的? 第二个:native和flutter的channel的通道是如何设计的? 第三个:Flutter是适配层到底再做些什么? 中控中心FlutterBoost 单独拎出来讲讲,这个类比较简单,就是集合各个模块并让其初始化,同时也是该插件入口处,不管原生和flutter都一样,看源码也是从这里开始看起,但原生和flutter的初…

博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://github.com/wangjiegulu/flutter_test_01 编写你的第一个Flutter App 原文:https://flutter.io/get-started/codelab/ 这个你创建第一个Flutter app的指南.如果你熟悉面向对象的代码,基本的编程概念,比如变量,循…

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. Flutter中文网 (有安装和搭建Flutter的教程) https://flutterchina.club 安装 Flutter 和 Dart 插件 启动 Android Studio,搜索 Flutter 插件并单击 install,系统提示您安装 Dart…

侧滑菜单在安卓App里面非常常见,比如Gmail,Google Play,Twitter等.看下图 网上也有很多创建侧滑菜单的教程,我也来记录一下,自己学习创建Drawer的过程. 1. 创建一个空的App import 'package:flutter/material.dart'; class HomePage extends StatefulWidget{ @override _HomePageState createState() => _HomePageState(); } class…

16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是还是有超出的问题. 保持首页页面状态 每次点击底部的tab标签.再点击首页,首页的数据就会重新加载. 这里就用到了混入,在页面上进行混入:with AutomaticKeepAliveClientMixin 混入之后必须主要三点: 第一,添加混入 第二:重写wantKeepAlive方法,返回为tr…

Android/iOS移动端开发 原生开发 Android原生应用通常指使用Java或Kotlin语言直接调用Android SDK开发的应用程序:而iOS原生应用通常指使用Objective-C或Swift语言直接调用iOS SDK开发的应用程序. 主要优势: 可访问平台全部功能(GPS.摄像头); 速度快.性能高.可以实现复杂动画及绘制,整体用户体验好: 主要缺点: 平台特定,开发成本高:不同平台必须维护不同代码,人力成本随之变大: 内容固定,动态化弱,大多数情况下,有新功能更新时只能发版:…

FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触. 一般来说,它是一个圆形,中间放着图标,会优先显示在其他Widget的前面.一般可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutter中其他按钮的常用属性大部分相同,但是也有特殊的: child :子视图,一般为 Icon,不推荐使用文…

代码如下: import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Returning Data', home: HomePage(), )); } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(…

一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆栈的方法,例如Navigator.push和Navigator.pop.如果类比这Ios记忆的话,你可以粗略地把一个路由对应到一个 UIViewController.Navigator的工作原理和 iOS 中 UINavigationController 非常相似,当你想跳转到新页面或者从新页面返回…

2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地.未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是Google开源的跨端便携UI工具包,除了具有非常优秀的跨端渲染一致性,还具备非常高效的研发体验,丰富的开箱即用的UI组件,以及跟Native媲美的性能体验.由于它的众多优势,也使得Flutter成为了近些年来热门的新技术. 通过以上的特点可以看出,Flutter可以极大的加速客户端的研发效率,与此…

Flutter如何引用第三方库并使用 https://www.jianshu.com/p/bbda7794345e Flutter官网点击访问Flutter教程(一)Flutter概览Flutter教程(二)Flutter安装及运行 如何引用并安装第三方库 pubspec.yaml管理第三方库 在pubspec.yaml中添加第三方库名称及版本号. 例如添加第三方库english_words dependencies: flutter: sdk: flutter cupertino_icons:…

老孟导读:关于Flutter为什么使用Dart?这个话题,就像PHP是世界上最好的语言一样,争论从来没有停止过,有很多说法,比如: Google是为了推广Dart,Dart是亲儿子. Flutter团队和Dart团队相邻,沟通起来更方便. 或许存在这样的考虑,但即使是亲儿子,烂泥也要能扶上墙才行啊,难道你真的觉得如此重大的决定是靠这些主观色彩决定的?不可能的,所以Dart一定是有其非常大的优势. 前言 在Flutter成立之初,Flutter团队评估了10多种语言,Flutter团队从四个主要维…

创建第一个flutter 编辑器: vscode 一.创建flutter项目 1.启动vscode 2.按ctrl+shift+p打开命令面板 3.输入flutter 选择Flutter: New Project 4.输入创建项目名称 5.指定存放项目地址.自动创建flutter基础项目结构 显示main.dart文件 二.运行项目 1.选择运行设备 2.按 F5 键或调用Debug>Start Debugging 运行项目 三.体验热重载 1.把lib/main.dart文件中 'You ha…

Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo, 欢迎Star 使用场景 当需要给一个元素点击事件的时候,你可以用InkWell来包裹这个元素,它里面有常用交互事件和点击效果,可以简单实现想要的效果 预览 组件参数说明 const InkWell({ Key key, W…

API 使用这个修改状态可以不用setState(). class _MyHomeState extends State<MyHome> { final ValueNotifier<int> _counter = ValueNotifier<int>(0); final Widget goodJob = const Text('Good job!'); @override Widget build(BuildContext context) { return Scaff…

flutter & AndroidStudio flutter的下载与配置 flutter是Google推出的基于Dart语言开发的跨平台开源UI框架,能够支持安卓与iOS. flutter框架的下载地址为: Windows macOS Linux 若在上述网址中无法顺利下载,也可以去flutter的github下载,注意,github上flutter包含不稳定的测试版,目前flutter-1.17.0-stable为最近的稳定版. 在下载后,将zip压缩文件解压至你希望的flutter安装路径…

本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; padding: 0; } ************************************************居中相关************************************************ 假设div的宽高均为100px. 1.div水平居中,直接使用margin:0 a…

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…