近期遇到一些很烦的琐事,状态比较down,很多原本计划好的事情都耽搁了,实在是难顶-- 看到后台一直有朋友问怎么博客和公众号没有更新,所以我忙完得闲就来更了! 前言 起因是最近重拾以前的旧项目(业余做的,打算有机会自己运营起来)继续完善,然后发现有些界面设计太粗糙了,实在不满意(虽然是因为本来功能就不多),然后就着手开始优化~ 应该会写成一系列文章,今天就从App的"我"页面开始吧~ 效果图 话不多说,先上效果图. 修改前页面的顶部只有头像.名称.签名三个元素,显得很空:修改后增加了具

前言:Flutter官方文档里的一句话:you build your UI out of widgets(使用Flutter开发UI界面时,都是使用Widget),然而,Widget并不是我们真正看到的视图,背后究竟是什么?其实Flutter Framework提供了三种视图树,即:Widget  Element  RenderObject,只不过,我们使用Flutter开发界面时,通常只和widget打交道,就如前文中所展示的Materail风格或者Cupertino(IOS风格)的各种Wid

Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组件的状态发生改变,组件会重构它的配置和状态(这些配置和状态是在组件外部重构的,内部的配置和状态都不可变的).然后底层框架会将最新的配置和状态与先前的做对比,由此产生一个最小的差值,并由此差值来决定底层渲染树从旧状态过度到新状态. Hello World 首先我们先来写一个最基本的flutter应用吧

前言 每当我们评估新技术时要问的第一个问题就是“它会给我们的业务和客户带来哪些价值?”,工程师们很容易对闪闪发光的新事物着迷,却经常会忽略这些新事物其实可能对我们的客户没有任何好处,反而只会让现有的工作流程更加复杂. flutter最近比较热闹,毕竟是Google出品. 但我们不是炒作热点的媒体,也不是忽悠你交学费的培训机构,我们作为实际的跨平台开发者,冷静的分析下这个东东. flutter是Google为Fuchsia操作系统设计的应用开发方式. Fuchsia OS要兼容廉价物联网设备,要求

一,前言 在开发 Flutter 的过程中你可能会发现,一些小部件的构造函数中都有一个可选的参数——Key.在这篇文章中我们会深入浅出的介绍什么是 Key,以及应该使用 key 的具体场景. 二,什么是Key 在 Flutter 中我们经常与状态打交道.我们知道 Widget 可以有 Stateful 和 Stateless 两种.Key 能够帮助开发者在 Widget tree 中保存状态,在一般的情况下,我们并不需要使用 Key.那么,究竟什么时候应该使用 Key呢. 我们来看看下面这个例子

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

稳住,今天是周末,不过我今天要上班....啊..啊... 对于 Flutter 我没有太多的发言权,不过GSY是对 Flutter 充分理解并精深掌握的前辈了,所以转一篇他对 Flutter 的一些解答文给大家,如果你有相似的疑问,希望对你有用. 回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结. 内容有点长,但是相信能帮你更好地去认识

Widget 的本意是组件的意思,熟悉 Web 应用开发的人在后期必定会接触到 Vue.React 等框架,这些框架都有一个核心的概念 -- 组件.组件的目的也很简单,那就是重复率用一段代码,并且能够灵活地使用或拆卸. 在 Flutter 中,界面上所有可展示的内容都是一个个 Widget,也就是说在 Flutter 中,构建界面的最小单位就是 Widget.Widget 可以嵌套 Widget,就如 HTML 中标签可以嵌套标签一样.最直接的理解:Widget ≈ 标签.

文章微信公众号「AndroidTraveler」首发 5 月 20 号参加了 Android Q Labs,因此本篇说一说会议的部分内容以及自己的一些想法. 会议主要是加深开发者对 Android Q 的了解,从而帮助开发者做好 Android Q 的兼容工作. 因此本篇我会选择性说明一些在 Android Q 上你需要兼容的一些事情. 1. 后台 Activity 启动限制 首先我们说说为什么要限制后台 Activity 的启动. Android Q 之前的情况如下: 考虑下面的几个场景: 我

## Dart特性 Dart同时支持JIT(Just In Time,即时编译)和AOT(Ahead of Time,运行前编译)两种编译模式. **JIT** 在运行时即时编译,在开发周期中使用,可以动态下发和执行代码,开发测试效率高,但运行速度和执行性能则会因为运行时即时编译受到影响. **AOT** 即提前编译,可以生成被直接执行的二进制代码,运行速度快.执行性能表现好,但每次执行前都需要提前编译,开发测试效率低. ###### Flutter在开发期使用JIT编译,可以缩短产品的开发周期

ESP8266远程控制电子门 最前面介绍: 这是一个使用ESP8266 联网控制继电器,实现手机远程控制电子门,打开关闭,开关一次的物联网联手小项目 附git地址:https://github.com/YaronWong/ESP8266RemoteControl ​ 三个周末,学习了下ESP8266 基础使用,做了个小玩具 ​ 实现手机端控制电子大门的开关,再也不用担心没带钥匙进不去大门了 (掩面) ​ 使用场景:电子门支持红外遥控器,有时忘记遥控或门禁卡,只能呼叫同事开门,遂想把遥控开关放到手

1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewpager 2.Flutter 实现 上边提到的用安卓原生做,思路是很明确,但是代码量还是有的,那么来看一下, Flutter 如何使用 Viewpager 实现的. 2.1.创建有状态 Widget 首先创建有状态 StatefulWidget,然后构建 state:_ApplicationPage

19.首页_火爆专区界面布局编写 看一下图片的效果 一个标题栏,下面是多行两列.里面可以用column布局,外面用Warp流式布局 有得小伙伴说这里可以用网格布局,网格布局的话还是有一定的效率问题.这里就用我们的流布局,还是很顺畅的 填一下上节课的坑,设置可选参数 这里用花括号括起来就是个可先的参数了. 修改成可选参数后呢,我们在调用方法的时候就报错了. 我们只要修改为key/value的形式就可以了 上拉刷新有几种方式 火爆专区主要的代码,这是之前的,现在要删掉了 //火爆专区 定义为动态的类

30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式: 我们拆的散一点,用内部方法的形式,我们把图片和名称分别拆成单独的方法去实现,然后在组合成一个子项赋值给ListView 开始写内部方法 图片widget 如果图片很大的话,我们需要设定一个限制,这个时候就体现出来这个外层套一个Container的好处.很容易给

本文微信公众号「AndroidTraveler」首发. 背景 我们知道页面之间如果直接切换,会比较生硬,还会让用户觉得很突兀,用户体验不是很好. 因此一般情况下,页面之间的切换为了达到平滑过渡,都会添加动画. 另外,有时候我们不喜欢系统的默认动画,希望能够自定义动画. 基于此,本篇主要讲述如何给 Flutter 的页面切换增加自定义动画. 默认效果 首先我们看看默认效果是怎样的? 看起来似乎还不错.代码如下: import 'package:flutter/material.dart'; voi

写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了其中的黑胶唱机动画. 先贴上项目地址 github.com/KinsomyJS/f- 初步效果图 思路 这个界面实现起来其实是比较简单的,大致分为如下几个部分: 1.背景的高斯模糊效果 2.黑胶唱头的旋转动画 3.黑胶唱片的旋转动画 4.下部控制器和进度条部分 我们一个个来说实现过程. 实践 整个界

在上一篇文章,我们介绍了如何在flutter中使用redux.在上一篇文章的例子中,我们使用了单界面集成redux,但是在实际项目中,我们通常涉及多个模块,每个模块涉及多个界面,那么如何使用redux整合模块,并实现模块和界面间的消息传递呢? 例子:登录 接着上篇文章,这次的例子稍微复杂一点: 目标: 实现登录界面,实现基本登录逻辑 成功之后将结果通知到其他界面 先将AppState等状态有关的移动到reducers.dart,创建LoginPage.dart LoginPage.dart代码如

import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build //需要构建一个material的部件 return

1. 使用场景:退出登录./// 路由作用:移除 [ModalRoute.withName("/loginPage")] 除外的所有界面,并跳转到 ["/loginPage"] 界面.** [ModalRoute.withName("/loginPage")] 可用任意未打开的界面代替,从而达到关闭所有界面效果. **Navigator.of(context).pushNamedAndRemoveUntil( "/loginPage&q

Android 中有BottomNavigationBar+Fragment切换 而在Flutter也有的BottomNavigationBar 效果图 底部有两种情况 底部导航栏的类型更改其项目的显示方式.如果未指定,则 当少于四个项时,它会自动设置为BottomNavigationBarType.fixed, 否则为BottomNavigationBarType.shifting. BottomNavigationBarType.fixed,当少于四个项目时的默认值.如果选中的项为非null

小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式: 我们拆的散一点,用内部方法的形式,我们把图片和名称分别拆成单独的方法去实现,然后在组合成一个子项赋值给ListView 开始写内部方法 图片widget 如果图片很大的话,我们需要设定一个限制,这个时候就体现出来这个外层套一个Container的好处.很容易给外层这个Container加上限制