Flutter
文章平均质量分 91
Flutter学习之路
LinShunIos
这个作者很懒,什么都没留下…
展开
-
Flutter —— 混合工程自动化
Flutter —— 混合工程自动化1. 前言2. 混合工程1. 前言作为一个团队来说,会有很多的工程搭配,团队里会有Flutter工程,Android工程和iOS工程,那么这些工程搭配在一起的时候就会有问题,因为每个开发者都有自己的开发环境,那么这个时候如果去配置所有的环境的话就很麻烦,所以就有了混合工程自动化的需求。2. 混合工程先创建一个flutter_module 和 一个 iOS工程。在iOS工程里面创建一个button,响应方法里面展示flutterController, 那么这个时候肯原创 2021-12-15 16:59:31 · 2075 阅读 · 0 评论 -
Flutter —— Packages 和 Plugin
Flutter —— packages 和 plugin1. Packages1.1 简介1.2 创建 Packages1.3 发布 Package1.4 Package在项目中应用1.5 Package分数1.6 Part2. Plugin1. Packages1.1 简介Dart package 最低要求是包含一个 pubspec.yaml 文件,package只包含dart部分。此外,一个 package 可以包含依赖关系 (在 pubspec.yaml 文件里声明)、 Dart 库、应用、资源原创 2021-12-03 17:25:08 · 2895 阅读 · 2 评论 -
Flutter —— 混合开发
Flutter —— 混合开发1. 混合开发2. 混合开发操作第三方库 imagePicker1. 混合开发混合开发分两种情况Flutter 项目调用原生功能原生的项目嵌入Flutter(比较重,不建议)2. 混合开发操作回到之前的仿微信的我的界面来做一个点击头像通过相册更换图片的功能。在之前的现实头像的地方添加一个GestureDetector,并且添加onTap方法。Flutter里面和原生通讯用的是Flutter专门提供的MethodChannel。这里声明一个_method原创 2021-11-29 15:37:13 · 810 阅读 · 0 评论 -
Flutter —— key 的原理
Flutter —— key 的原理1. Key 的原理2. Key 的 探究之前的文章中有的类故意没有写Key,那么这个Key有什么作用呢?今天来探究一下。1. Key 的原理key 本身是一个抽象类,有一个工厂构造方法创建ValueKey2. Key 的 探究其实任何的Widget都是有key的,key是可以为空的。创建一个KeyDemo放在MaterialApp的home里面class KeyDemo extends StatefulWidget { const KeyDem原创 2021-11-25 15:10:31 · 1869 阅读 · 0 评论 -
Flutter —— 渲染原理
Flutter —— 渲染原理1. 渲染原理2. Render 树3. Element 树4. Element 和 Widget 的关系1. 渲染原理在Flutter实战中写道,Flutter 框架的布局、绘制的处理流程是这样的:根据 Widget 树生成一个 Element 树,Element 树中的节点都继承自 Element 类。根据 Element 树生成 Render 树(渲染树),渲染树中的节点都继承自RenderObject 类。根据渲染树生成 Layer 树,然后上屏显示,La原创 2021-11-25 10:36:32 · 1990 阅读 · 0 评论 -
Flutter —— 生命周期
Flutter —— 生命周期1. 生命周期1. 生命周期一个对象从创建到销毁所经历的过程就是一个生命周期,说白了就是回调方法。在Flutter中已经封装好了,知道widget处于什么样的状态了,然后给你一个对应状态的回调,所以说生命周期其实是一系列的回调方法。那么生命周期有生命作用呢?...原创 2021-11-23 15:01:57 · 1793 阅读 · 0 评论 -
Flutter —— 搜索框
在聊天界面添加一个搜索框。那么就在ListView里面添加一个cell,那么就需要itemCount里面加1。 itemCount: _datas.length + 1,创建一个chat package,然后将chat_page拖进来并且重新创建一个search_cell文件。将ListView里面的itemBuilder的代码抽取成一个方法,然后在里面判断如果index == 0 则返回 SearchCell。这里后面需要index–,否则index就会从1开始。接下来写search ce原创 2021-11-19 10:33:16 · 5201 阅读 · 0 评论 -
Flutter —— dio
Flutter —— dio1. 关于import2. pubspec1. 关于importimport 中 as关键字来给他起了个别名来避免类名、方法名冲突。导入库,默认是整个库都导入show:执行需要导入的内容。hide:需要隐藏的内容。2. pubspecpubspec 包含:name:项目名称,必填字段description:项目介绍,非必填字段publish_to : 指定包发布的位置version : 发布的工程版本号environment SDK : dar原创 2021-11-16 16:35:27 · 3561 阅读 · 0 评论 -
Flutter —— 异步编程和多线程
Flutter —— 异步编程在网络请求中经常使用异步编程,那么来探索一下Flutter 中的异步编程。dart是单线程的,所以底层没有锁之类的东西,但是这不代表着dart不能异步,异步不代表多线程。下面代码运行后发现做其他事情被堵塞住了,这里async不起作用是因为需要搭配Future使用。将耗时操作使用Future包装起来,这里可以看到做其他事情就不会被堵塞住了,那么现在即使方法不加async也是异步的,因为Future里面已经是异步的了。如果把 print(‘结束data = $_d原创 2021-11-11 17:38:38 · 2938 阅读 · 0 评论 -
Flutter —— 聊天界面
Flutter —— 聊天界面首先做的事右上角的按钮,右上角要弄一个menu,那么这里可以在AppBar的actions添加Flutter封装好的控件PopupMenuButton,用一个container包着调整位置,然后用offset调整自身的位置。actions: [ Container(child: PopupMenuButton( itemBuilder: (BuildContext context) { re原创 2021-11-09 14:38:34 · 2419 阅读 · 0 评论 -
Flutter —— 通讯录页面&索引条
Flutter —— 通讯录页面&索引条1. 通讯录页面2. 索引条1. 通讯录页面做完了发现页面和我的页面,接下来做通讯录页面。将_currentIndex 改成1方便开发。发现通讯录页面还是要用到之前的_themColor,那么就将_themColor抽取出来以便公用。创建一个文件来存放这些需要公用的常量。然后放入主题色之后,在别的地方import这个文件就能使用了。//主题色const Color weChatThemColor = Color.fromRGBO(220, 220,原创 2021-11-05 15:43:41 · 1363 阅读 · 0 评论 -
Flutter ——发现页面和我的页面搭建
Flutter —— 发现页面和我的页面搭建1. 发现页面2. 我的页面上文中进行了基础页面的搭建,并且创建了底部导航栏,那么今天就开始搭建发现页面和我的页面。先来到上次的rootpage中将_currentIndex改为2,这样默认选择的就是发现页面,方便进行页面搭建。要搭建页面,心里就要大概思考要用什么部件来搭建这个页面。1. 发现页面那么看到这个界面,看到有AppBar,那么就想到要用scaffold,然后在body用container包着row来实现。这里将AppBar的Title 颜原创 2021-11-02 17:30:19 · 1370 阅读 · 2 评论 -
Flutter——Dart面向对象
Flutter——Dart面向对象1. 类与对象2. 构造函数3. 工厂构造&单例对象&初始化列表4. 类方法&对象操作符5. Dart 的继承6. 抽象类和接口混入Mixins1. 类与对象在Flutter中,使用class 关键字声明一个类,使用new加上构造函数生成一个对象,所有的对象都默认继承Object类。Dart中会默认生成getter 和 setter方法,属性和方法都通过点语法进行访问,Dart方法不支持重载。final修饰的属性必须定义初始值。声明一个类:c原创 2021-10-02 10:34:44 · 575 阅读 · 0 评论 -
Flutter —— dart基础语法
Flutter —— dart基础语法(1)1. Flutter 项目创建2. Dart 语法2.1 var、final和const2.2 num2.3 string2.4 list 和 map2.5 ??= 和 ??2.6 方法 和 箭头函数2.7 方法的可选参数2.8 方法作为参数传递2.9 匿名函数2.10 闭包1. Flutter 项目创建Flutter配置完之后,就可以在Android studio 创建 Flutter项目啦,点击Create New Flutter Project之后,原创 2021-09-30 09:35:28 · 888 阅读 · 0 评论 -
Flutter —— 弹性盒子布局&状态管理&项目搭建
Flutter —— 弹性盒子布局&状态管理&项目搭建1. Stack2. Positioned3. AspectRatio4. 状态管理5. 项目搭建5.1 底部导航栏5.2 程序的名字以及图标5.3 Assets1. Stack创建一个StackDemo。class StackDemo extends StatelessWidget { const StackDemo({Key? key}) : super(key: key); @override Widget bu原创 2021-11-01 09:27:03 · 366 阅读 · 0 评论 -
Flutter——环境搭建forMac
Flutter——环境搭建forMac1. 安装Flutter1.1 下载Flutter SDK1.2 配置环境变量1.2.1 配置镜像1.2.2 配置Flutter 环境变量2. 配置 Android studio 环境2.1 安装Android Studio2.2 配置SDK2.3 Android Studio 安装Flutter 插件2.4 JDK问题2.5 许可证问题2.6 修改build.gradle文件1. 安装Flutter1.1 下载Flutter SDK首先要做的就是Flutter原创 2021-09-29 10:25:59 · 261 阅读 · 0 评论 -
Flutter —— 文本,Container,布局
Flutter —— 文字和弹性盒子布局1. 文本1.1 Text1.2 RichText2. Container3.布局3.1 Row & Column & Stack3.2 Alignment3.3 主轴3.4 交叉轴3.5 Expanded1. 文本1.1 Text首先创建一个简单的Text,然后输入文本后运行。class TextDemo extends StatelessWidget { @override Widget build(BuildContext co原创 2021-10-26 14:28:55 · 1001 阅读 · 0 评论 -
Flutter —— 页面基础
Flutter —— 基础Flutter 和 RNFlutter 页面基础页面自定义widgetMaterialApp & ScaffoldListViewFlutter 和 RNFlutter能够在Android 和iOS 上同时运行的原因是iOS和Android上面都安装了Flutter的渲染引擎,而RN则是在原生UI的基础上进行包装,那么一旦原生的UI更新,RN就也需要更新,进行兼容处理,并且RN让Android的显示Android的控件,iOS显示iOS的控件,那么就不是一套UI。F原创 2021-10-25 10:43:58 · 739 阅读 · 0 评论