老孟导读:Flutter 1.20 更新了 Slider.RangeSlider.日期选择器组件.时间选择器组件的样式,新增了交换组件:InteractiveViewer,下面详细介绍其用法. 滑块 Flutter 1.20 版本将 Slider 和 RangeSlider 小部件更新为最新的 Material 准则.新的滑块在设计时考虑到了更好的可访问性:轨道更高,滑块带有阴影,并且值指示器具有新的形状和改进的文本缩放支持. Slider 基础用法: class SliderDemo exte…

老孟导读:此篇文章是 Flutter 动画系列文章第三篇,后续还有动画序列.过度动画.转场动画.自定义动画等. Flutter 系统提供了20多个动画组件,只要你把前面[动画核心](文末有链接)的文章看明白了,这些组件对你来说是非常轻松的,这些组件大部分都是对常用操作的封装. 显示动画组件 回顾上一篇[动画核心]的文章中创建动画三个必须的步骤: 创建 AnimationController. 监听 AnimationController,调用 setState 刷新UI. 释放 Animatio…

老孟导读:大家好,这是[Flutter实战]系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握. 第一篇链接:[Flutter实战]移动技术发展史 Text Text是显示文本的组件,最常用的组件,没有之一.基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本的样式在style中设置,类型为TextStyle,TextStyle…

老孟导读:大家好,这是[Flutter实战]系列文章的第三篇,这一篇讲解图片组件,Image有很多高级用法,希望对您有所帮助. 图片组件是Flutter基础组件之一,和文本组件一样必不可少.图片组件包含Image和Icon两个组件,本质上Icon不属于图片组件,但其外形效果上类似于图片. 在项目中建议优先使用Icon组件,Icon本质上是一种字体,只不过显示的不是文字,而是图标,而Image组件先通过图片解码器将图片解码,所以Icon有如下优点: 通常情况下,图标比图片体积更小,显著的减少App…

老孟导读:Flutter中有这么一类组件,用于定位.装饰.控制子组件,比如 Container (定位.装饰).Expanded (扩展).SizedBox (固定尺寸).AspectRatio (宽高比).FractionallySizedBox (占父组件比例).这些组件的使用频率非常高,下面一一介绍,最后给出项目中实际案例熟悉其用法. [Flutter实战]系列文章地址:http://laomengit.com/guide/introduction/mobile_system.html C…

老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班(Symbian)系统 后浪们可能都没有听说过塞班系统,而很多前浪们也会诧异,塞班是智能手机操作系统吗?让我们先来看下智能手机的定义: 智能手机,是指像个人电脑一样,具有独立的操作系统,独立的运行空间,可以由用户自行安装软件.游戏.导航等第三方服务商提供的程序,并可以通过移动通讯网络来实现无线网络接入…

老孟导读:[Flutter实战]系列文章地址:http://laomengit.com/guide/introduction/mobile_system.html 默认情况下,Flutter 的滚动组件(比如 ListView)没有显示滚动条,使用 Scrollbar 显示滚动条: Scrollbar( child: ListView.builder( reverse: false, itemBuilder: (BuildContext context, int index) { return…

老孟导读:这是 [Flutter 实战]组件系列文章的最后一篇,其他组件地址:http://laomengit.com/guide/widgets/Text.html,接下来将会讲解动画系列,关注老孟,精彩不断. 先看一下效果: 大家学习UI编程语言时喜欢用哪个 App 当作第一个练手的项目呢?,我喜欢使用 计算器 ,可能是习惯了吧,学习 Android 和 React Native 都用此 App 当作练手的项目. 下面我会一步一步的教大家如何实现此项目. 整个项目的 UI 分为两大部分,一部…

此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了. 更多动画效果及Flutter资源:https://github.com/781238222/flutter-do 添加依赖 在项目的 pubspec.yaml 文件中添加依赖: dependencies: wheel_switch: ^0.0.1 执行命令: flutter pub get 使用 WheelSwitch( value: false, ) 组件默认的宽高分别是80.30,也可以指定宽高: Wh…

02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flutter run来运行项目 为什么起名flutter_shop用下划线的形式呢?因为在windows下不支持小驼峰和大驼峰的命名方式,官方推荐我们使用下划线的形式 做项目的时候,外层都套一个Container组件呢,这样会使你以后扩展会变的很容易 开始写入口文件main.dart 新建文件夹Pages…

如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String   要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有ce…

老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义动画,首先要理解 Flutter 动画实现的基本原理及相关概念. 第1-4篇介绍了 Flutter 动画中最重要的三个概念以及三者之间的关系: AnimationController:动画控制器,控制动画的播放.停止等.继承自Animation< double >,是一个特殊的Animation对…

<Flutter实战>开源电子书 <Flutter实战> 开源了,本书为 Flutter中文网开源电子书项目,本书系统介绍了Flutter技术的各个方面,本书属于原创书籍(并非翻译),希望对大家有帮助: 在线阅读地址:book.flutterchina.club <Flutter实战> github: github.com/flutterchin… <Flutter实战>目录 缘起 起步 移动开发技术简介 Flutter简介 搭建Flutter开发环境 Da…

技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里面放column布局 在column布局里面用ListTiel 布局 下面再复制这两个ListTiel元素 在每行下面加一个分割线 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp…

如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件",在Flutter中,所有的元素皆由组件组成,比如说我们常用的文本.图片.按钮.动画等等,接下来说一下在Flutter中最常用到的几类组件. 容器组件 容器组件(Container)可以理解为在Android中的RelativeLayout或LinearLayout等,在其中你可以放置你想布局的元…

如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源传递到Adapter中,最终进行列表数据的展示,那么在Flutter中如何处理列表数据呢? 在Flutter中,用ListView来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类: 1.水平的列表 2.垂直的列表 3.数据量非常大的列表 4.矩阵式的列表 垂…

<Flutter 实战>开源电子书 转 https://blog.csdn.net/OQjya206rsQ71/article/details/86619630   关于 Flutter 我就不过多介绍了,身为移动端或者前端的程序员都应该了解.关于 Flutter 的前景我也不过多预测和吹捧了.今天纯粹就是为了给大家分享一个开源的项目,是来自于 Flutter 中文网<Flutter 实战>开源电子书项目. 具体有哪些呢?请看下图: 在这里,我们应该感谢这些开源作者的辛苦努力和付出…

老孟导读:动画系统是任何一个UI框架的核心功能,也是开发者学习一个UI框架的重中之重,同时也是比较难掌握的一部分,下面我们就一层一层的揭开 Flutter 动画的面纱. 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称"后像",视觉的这一现象则被称为"视觉暂留". 人眼能保留0.1-0.4秒左右的图像,所以在 1 秒内看到连续的25张图…

k8s配置中心实战-多环境交付apollo三组件 目录 k8s配置中心实战-多环境交付apollo三组件 1.环境准备工作 1.1 zk环境拆分 1.2 namespace分环境 1.3 数据库拆分 1.3.1 修改初始化脚本并导入 1.3.2 修改数据库中eureka地址 1.4 变动原有资源配置启动 1.4.1 修改portal的cm资源配置清单 1.4.2 任意节点应用修改 2 部署新环境的APOLLO服务 2.1 先创建出所需目录和文件 2.2 部署test环境的configservic…

老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件(Flow). 水平.垂直布局组件 Row 是将子组件以水平方式布局的组件, Column 是将子组件以垂直方式布局的组件.项目中 90% 的页面布局都可以通过 Row 和 Column 来实现. 将3个组件水平排列: Row( children: <Widget>[ Container( hei…

老孟导读:Flutter中很多组件都有一个叫做shape的属性,类型是ShapeBorder,比如Button类.Card等组件,shape表示控件的形状,系统已经为我们提供了很多形状,对于没有此属性的组件,可以使用 Clip 类组件进行裁减. BeveledRectangleBorder 斜角矩形边框,用法如下: RaisedButton( shape: BeveledRectangleBorder( side: BorderSide(width: 1, color: Colors.red),…

前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解在 Dart 中如何定义回调函数. 回调函数必须使用typedef关键字声明: typedef OnCreated = void Function(String e); 注意:函数的别名声明的位置最好在类之外. 在 Person 类中的 create 函数里创建回调函数: class Person…

博客地址: https://jspang.com/post/FlutterShop.html#toc-0ee 编写页面代码 创建动态组件HomePage,原来的代码是静态的我们这里就去掉就可以了. 然后使用column布局来写我们的代码 Column就是我们的列布局 TextField只有设置了controller,才能获取到文本框的值.首先我们放的是一个TextField文本框 我们在上面声明typeController.它的类型是:TextEditingController showText…

13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 这个组件我们需要准备下数据 预览效果 最终代码 import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'package:flutter_swiper/flutter_swiper…

17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个String类型的参数 标题的各个边上有内边距我们先设置一下 这样我们的标题组件就写完了 楼层商品内容 然后再学些每个楼层的商品.接收一个List数组 里面的每个子项拆分成item,这里我们先写个内部方法,接收一个Map类型的goods的商品子项 这样我们的子组件就写完了 商品我们分成两行,我们先写第一…

20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelongqy/flutter_easyrefresh 添加依赖 首先添加引用我们的插件: pubspec.yaml.用最新的版本 页面上添加引用 import 'package:flutter_easyrefresh/easy_refresh.dart'; 上拉加载我们是要做到我们的主方法里面的.只有做…

这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题.我觉的选插件也是选人,人对了,插件就对了. flutter_easyrefresh简介 flutter_easyrefresh官方简介: 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView.它的功能与Andr…

一,前言: MaterialApp和Scaffold是Flutter提供的两个Widget,其中: MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需要的一些Widget. Scaffold组件是Material Design布局结构的基本实现.此类提供了用于显示drawer.snackbar和底部sheet的API.MaterialApp 的 child 是 Scaffold Widget. 二,MaterialApp属性介绍 * 22个参数…

50.持久化_shared_preferences 当app关掉了.再进去的时候 ,购物车的内容还是存在. sqflite提供这个来操作SQLite数据库 flutter提供三种持久化的工具 今天要学的就是 shared_preferences 还有一种持久化就是:file,用流的形式去读取还是有些慢 安装shared_preferences 插件地址: https://github.com/flutter/plugins/tree/master/packages/shared_preferen…

k8s配置中心实战-交付apollo三组件 目录 k8s配置中心实战-交付apollo三组件 1 apollo简单说明 1.1 apollo最简架构图: 1.2 apollo组件部署关系 2 为appllo准备数据库 2.1 下载安装mysql 2.1.1 yum安装mysql 2.1.2 创建简单配置文件 2.1.2 启动mysql并初始设置 3 初始化appllo数据库 3.1 configdb数据库 3.1.1下载脚本并执行: 3.1.2 授权并修改初始数据: 3.1.3 添加config…