在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 流行指数:★★★★ Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要. 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 二.WeUI

准备阶段 下载 Flutter SDK 新建 Flutter 文件夹,克隆 Flutter SDK: git clone -b beta https://github.com/flutter/flutter.git 配置 Flutter 环境 我是 Mac 系统,Flutter SDK 下载完后的路径:Users/wuxiaolong/Flutter/flutter/ . 在命令行下,进入用户目录 cd $HOME 打开.bash_profile文件 执行命令打开文件: open -e .bas

博客搬迁至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的指南.如果你熟悉面向对象的代码,基本的编程概念,比如变量,循

现在开发 App 的方式非常多,原生.ReactNative.Flutter 都是不错的选择.那你有没有关注过,使用不同的方式,编译生成的 Apk ,大小是否会有什么影响呢?本文就以一个最简单的 Hello World App,来看看不同的框架,编译出来的 Apk 大小,有什么区别.当然,本文的环境下是一个最简单的 Apk,其实只能部分说明问题,你觉得呢? - 承香墨影 移动开发发展至今,已经可以接受很多方式来开发 App,例如基于特定平台的原生开发方式(使用 Java 或者 Kotlin 开发

Hi,大家好,我是承香墨影! 距离 Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本,Flutter 是 Google 用以帮助开发者在 Android 和 iOS 两个平台,同时开发高质量原生应用的全新移动 UI 框架. 当时上线的官网资料,都是英文的.而经历了一个多月的整理.翻译.测试.现在 Flutter 中文站 正式上线了. Flutter 中文站是 Flutter 官网的一个中文镜像,是目前最全的 Flutter 官方文档的中文翻译,目标是致力于打造

flutter初体验 和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词是child或者children.以我几乎为0的web布局经验,往往在使用widget的时候,头脑里面映射的都是div,table等语义话标签. StatefulWidget和StatelessWidget Widget大类上分为两个,StatefulWidget和StatelessWidget.这

一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如 WebView 和 React Native,来提升开发效率和用户体验.但这两种方式也带来了新的问题. 比如使用 WebView 跨平台方式,优点确实非常明显.基于 WebView 的框架集成了当下 Web 开发的诸多优势:丰富的控件库.动态化.良好的技术社区.测试自动化等等.但是缺点也同样明显:渲染效率和 JavaScript 的执行能力都比较差,使页面的加

前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 StatefulWidget,我们要继承哪一个? 下面让我们跟着文章来探索一番. 目录 1. StatelessWidget 我们先来看下继承的 Widget 为 StatelessWidget 的情况. 第一步:新建一个文件 bold_text.dart 这里文件名后面后缀 .dart 可带可不带

背景 说到异常处理,你可能直接会认为不就是 try-catch 的事情,至于写一篇文章单独来说明吗? 如果你是这么想的,那么本篇说不定会给你惊喜哦~ 而且本篇聚焦在图片的异常处理. 场景 学以致用,有具体的应用场景,能够加深我们对知识的掌握. 我们以简书的文章列表为例,如下图: 假设产品有这样的需求,当右边的封面图加载失败的时候,用一个默认图片替换或者直接让文本横向填充原有图片位置. 不管处理方式是怎样,首先我们要做的就是能够知道图片加载失败. 如何获知图片加载失败呢?下面我们通过 Flutte

背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 826 pixels

首先参照官方文档进行搭建Mac下的环境 ,然后就会遇到以下问题:   1.在下载了Flutter 之后,执行Flutter doctor之后,报错: Could not resolve URL "https://pub.flutter-io.cn". Unable to 'pub upgrade' flutter tool 解决方法: 重新打开终端:执行以下设置 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER

字体图标生成 http://fluttericon.com/Flutter中文网 https://flutterchina.club Flutter官网 https://flutter.ioFlutter中文社区https://www.flutter123.netFlutter中文开发者论坛 http://flutter-dev.cn/Flutter|Dart语言中文社区 http://www.cndartlang.com/flutterDart开源包 https://pub.dartlang.

前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutter 的 UI. 前言 说到 UI,我就简单说下 Flutter 作为一门跨平台语言具有的优势之一,提高效率吧. 举个例子: 假设现在要开发一个界面,Android 开发需要一天,iOS 开发也需要一天.那么就是两天. 如果你用 Flutter 开发,就只需要一天(因为 Android 和 iOS 都

前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC IDE:Android Studio 目录 1. 创建一个 Flutter 项目 第一步:主界面点击创建 Flutter 项目 第一步:如果已经打开项目,则通过 File->New->New Flutter Project... 创建 第二步:默认选择 Flutter Application 即可

前言 工欲善其事,必先利其器 所以第一篇我们来说说 Flutter 环境的搭建. 笔者这边使用的是 MAC 电脑,因此以 MAC 电脑的环境搭建为例. Windows 或者 Linux 也是类似的操作. Flutter 有英文版的官网和中文网,大家可以根据自己的喜好和情况进行选择. 点击下面的链接可以到对应的安装页面. Flutter 官网安装链接 Flutter 中文网安装链接 我们这边以官网为例进行说明. 目录 1. 配置镜像 点击进入官网,可以看到下图: 我们点击 Using Flutte

在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[AndroidManifest.xml]的 application 标签内,配置 <activity android:name="com.yalantis.ucrop.UCropActivity" android:screenOrientation="portrait&quo

前言 之前的博客我们都是在 debug 的模式下进行开发的. 实际发布到市场或者给到用户的都是 release 包. 而对于 Android 来说,release 包一个重要的步骤就是混淆. Android 如何混淆 如何你不做任何处理,直接在原有混淆基础上打出 release 包. 当运行到 Flutter 对应代码,会 crash. 因此我们需要在 Android 项目的 proguard-rules.pro 文件进行配置. #Flutter Wrapper -keep class io.f

前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 MethodChannel 的封装. 因此这篇我们来说下如何通过 MethodChannel 实现 Android -> Flutter 的通信. 至于 Flutter -> Android 的通信,没看过的小伙伴建议看下之前的文章 Flutter 即学即用系列博客--08 MethodChannel 实

前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生主动将电池的充电状态发送给 Flutter 并在界面显示. 步骤如下. 1. Flutter 界面修改 我们在原先基础上增加一列用于显示文本. String _chargingStatus = 'Battery status: unknown.'; Text(_chargingStatus), 2. Fl

背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么知道? 比如我在原生有些变化需要告知 Flutter,Flutter 又如何获知? 本篇我们先解决第一个问题.即 Flutter-> 原生的通信. 路由回顾 之前我们一直在讲 Flutter 相关的知识点,而且基本上都是在 main.dart 文件上面折腾,为了避免很多小伙伴觉得我们跨度过大. 因此

前言 本篇文章对于熟悉 flutter 或者 dart 的小伙伴来说可能觉得比较简单,但是对于初学者或者没用过的小伙伴还是有些收获的. 背景 说到 map 妙用的发现,还要归功于 Tooltip 的研究. 在研究这个 Widget 的时候,看到了它的源码 demo,所以发现了这个 map 的妙用. 那么妙用在哪呢? 统一处理 我们在上节课说到了 Expanded 的比例布局. 源代码如下: return Column( children: <Widget>[ Expanded( flex: 1