Flutter基础(九)资源和图片
本文首发于微信公众号「后厂技术官」
ReactNative入门系列React Native组件Flutter基础系列
和Android开发一样,Flutter也有asset这一概念,asset是打包到程序安装包中的,可在运行时访问。常见的asset类型包括静态数据(例如JSON文件)、配置文件、图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)。本文会通过例子,来简单介绍在Flutter中如何添加资源和图片。
1.指定assets要想使用asset,需要先让asset被识别,在项目根目录中的pubspec.yaml中定义图片就可以了。
flutter: assets: - assets/1.png - assets/2.png
在构建期间,Flutter会将asset放置到称为asset bundle的特殊存档中,应用程序可以在运行时读取它们。 如果想要包含某一个目录中的所有的资源,直接指定目录的名称:
flutter: assets: - assets/
这种指定只包含直接位于目录中的文件,如果想要添加位于子目录中 ...
Flutter基础(八)手势相关Widget:GestureDetector和Dismissible
本文首发于微信公众号「后厂技术官」
ReactNative入门系列React Native组件Flutter基础系列
前言移动开发中,用户交互是一个重要的环节,在Android中的触摸、点击、滑动等事件处理都提供了相关的Api,在Flutter中也是一样的,是由Widget来实现的。Flutter中的手势系统有两个独立的层。第一层是原始指针事件(pointer events),它描述了屏幕上指针,比如触摸、鼠标、触控笔的位置和移动。 第二层是手势,由一个或多个指针移动组成的动作会被识别为不同的手势。
1.指针事件指针表示用户与设备屏幕交互的原始数据。有四种类型的指针事件:
PointerDownEvent:指针接触到屏幕的特定位置。
PointerMoveEvent: 指针已从屏幕上的一个位置移动到另一个位置。
PointerUpEvent: 指针已停止接触屏幕。
PointerCancelEvent:此指针的输入不再指向此应用,通俗来讲就是事件取消。
在指针按下时,Flutter框架会对当前应用程序执行命中测试,以确定指针与屏幕接触的位置存在哪个Widget上,然后将Po ...
Flutter基础(七)Scrolling Widget之ListView、GridView、PageView
本文首发于微信公众号「后厂技术官」
ReactNative入门系列React Native组件Flutter基础系列
前言我们知道Widget的分类有很多种,比如:Basics、Material Components、Cupertino、Scrolling等等,在前面的文章我介绍了Basics和Material Components,这一篇讲一下Scrolling分类中比较常用的ListView、GridView、PageView。
1 ListViewListView可以说是Flutter中最常用的Scrolling Widget。ListView有四种构造函数:
默认构造函数ListView。
ListView.builder,适用于具有大量(或无限)列表项。
ListView.separated,可以配置分割线,适用于具有固定数量列表项的ListView。
ListView.custom,提供了自定义子Widget的能力。
1.1 默认构造函数用默认构造函数的方式来实现一个简单的列表。
import 'package:flutter/material.dar ...
Flutter基础(六)Material组件之BottomNavigationBar、TabBar、Drawer
本文首发于微信公众号「后厂技术官」
ReactNative入门系列React Native组件Flutter基础系列
前言在上一篇 Flutter基础(五)Material组件最佳入门(前篇)中,我介绍了Material组件的MaterialApp、Scaffold、AppBar,这篇文章接着介绍Material组件中的BottomNavigationBar、TabBar、Drawer。
1.BottomNavigationBarBottomNavigationBar是底部的导航栏,用于在3到5个的少量视图中进行选择。一般情况下,导航栏的选项卡由文本标签、图标或两者结合的形式组成。底部导航栏通常与javaScaffold结合使用,它会作为Scaffold.bottomNavigationBar参数。
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { static const S ...
Flutter基础(五)Material组件之MaterialApp、Scaffold、AppBar
本文首发于微信公众号「后厂技术官」
关联系列ReactNative入门系列React Native组件Flutter基础系列
前言在上一篇文章Flutter基础(四)开发Flutter应用前需要掌握的Basics Widget,我们学习了Basics Widget,除了Basics Widget,我们还需要了解Material Components,也就是Material组件。它提供了实现Material Design准则的视觉、行为和动作的Widget。官方将Material组件分为为几个类型:
应用程序结构和导航
Button
输入和选择
对话框,警告弹框和面板
信息显示
布局
主要介绍应用程序结构和导航,会分为两篇文章进行介绍,这一篇介绍应用程序结构和导航分类中的MaterialApp、Scaffold、AppBar。
1.MaterialApp说到Material组件,不得不提到MaterialApp,它包含了许多Widget,这些Widget通常是实现Material Design的应用程序所必需的。MaterialApp在此前的文章都用过,简单的使用这里就不介绍 ...
Flutter基础(四)开发Flutter应用前需要掌握的Basic Widget
本文首发于微信公众号「后厂技术官」
关联系列ReactNative入门系列React Native组件Flutter基础系列
前言学完了Dart语言,接下来就可以学习Widget了,Flutter的UI界面就是由Widget组成的,Widget的数量繁多,因此我会用几篇文章来专门介绍它,本篇就来介绍Basics Widget。
1.什么是WidgetFlutter的Widget的设计灵感来自于React,主要目的就是使用Widget构建UI。Widget根据其当前配置和状态来描述视图,当Widget的状态发生更改时,Widget会重建其描述。framework将根据前面的描述进行对比,以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。在Flutter中,除了Basics 的文本、图片、卡片、输入框这些基础控件,布局方式和动画等也都是由Widget组成的。通过使用不同类型的Widget,就可以实现复杂的界面。Widget可以翻译为部件,粗略的相当于Android中的View。Widget和View不同的是:Widget具有不同的生命周期:它是不可变的,每当Widget或者其 ...
Flutter基础(三)Dart快速入门
本文首发于微信公众号「后厂技术官」
关联系列ReactNative入门系列React Native组件Flutter基础系列
前言Dart是Flutter SDK指定的语言,因此要学习Flutter,Dart是必须掌握的。关于Dart可以写一本书了,这里用一篇文章来介绍下Dart的精髓,带你快速入门。和Java语言类似的部分,这篇文章就尽量不再讲了。
1. Dart开发环境搭建学习Dart语法最好需要用一个编辑器来实践,这里推荐使用IntelliJ IDEA。先下载Dart SDK,地址为:http://www.gekorm.com/dart-windows/打开IntelliJ IDEA,菜单中点击File–>Settings–>plugins,在plugins的搜索框中搜索Dart并安装,然后重启IntelliJ IDEA。点击File–>New Project–>Dart,按照下图配置Dart SDK。注意要选择第三个选项Constole Application,否则会默认创建一个Web项目。点击Next然后配置项目的名称就可以创建项目了。在项目中的 ...
Flutter基础(二)Flutter开发环境搭建和Hello World
本文首发于微信公众号「后厂技术官」
关联系列ReactNative入门系列React Native组件Flutter基础系列
前言其实没想写Flutter的相关文章的,因为这些看官方文档就够了,但是有不少同学就想看我写的,因此我也写个Flutter系列,顺便自己也梳理下知识点。这个Flutter基础系列是Flutter系列的入门系列,后面还会有其他的Flutter系列。既然要学习Flutter肯定要先学习环境的搭建,可以在Windows、MAC、Linux上来进行Flutter开发,由于本系列文章是面向Android开发来编写的,因此选择大部分人的都有的Windows平台。
本篇文章的目录为:
Flutter概述
Flutter开发环境搭建
运行一个Flutter Demo
Hello World
1.Flutter概述Flutter是谷歌的移动UI框架,可以快速在Android和iOS上构建高质量的原生用户界面, 它的前身是谷歌试验项目Sky。主要有以下几个特点:符合各个平台的用户体验Flutter内置了Material Design和Cupertino风格(iOS风格) ...
Flutter基础(一)移动开发的跨平台技术演进
本文首发于微信公众号「后厂技术官」
关联系列ReactNative入门系列React Native组件
本文首发于公众号「刘望舒」
前言本来这一篇应该介绍如何搭建Flutter开发环境的,但我想在了解Flutter前,不妨了解一下跨平台技术的演进,这样更有助于学习Flutter,也能认清Flutter的优势和本质。这篇文章还有一个目的,就是希望大家是玩技术的人,而不是被技术玩的人,对于不同的技术要有自己的判断。
1. 跨平台技术的诞生我是2010年开始从事的Android开发,当时会Android和iOS开发的很少,也不火,所有人都在“摸着河底过河”,项目更没有第三方框架一说,大都是自己写的,不像现在各种的框架满天飞。随着移动开发的发展,互联网公司也是层出不穷,有些公司迫于竞争,想要更迅速的更省成本的进行开发,就不再满足Android端一套代码,iOS端一套代码。与此同时,其他技术领域和各大公司也都觊觎着这份大蛋糕,纷纷推出相关的技术,这样跨平台技术应运而生,并且开始在公司中生根发芽。Android和iOS生态太大了,我们可以把它们比作第一级生态,想要颠覆这两个系统的曾经出 ...
Android AOSP基础(五)Android Studio调试系统源码的三种方式
本文首发于微信公众号「后厂技术官」
关联系列Android AOSP基础系列Android系统启动系列Android深入四大组件系列
前言作为应用开发,我们将AOSP源码下载下来后,去查看源码已经足够用,如果想更进一步,可以学习调试源码,这样有助于了解系统源码和原理。调试系统源码的方式有很多种,今天分享出来的是比较适合应用开发的三种,分别是AOSP源码项目调试、导入部分源码调试、新建Android项目调试。
需要注意的是,这三种方法都不需要整编系统源码,甚至有的方法只需要下载部分源码就可以了,哪个方法更适合你呢?看完本篇文章就会有答案了。
1. AOSP源码项目调试这种调试方法的前提是要将AOSP源码下载下来,关于下载AOSP源码,可以查看Android AOSP基础(二)AOSP源码下载这篇文章,另外还需要将AOSP源码导入到Android Studio中,并且配置SDK和JDK,这个在Android AOSP基础(四)Source Insight和Android Studio导入系统源码讲过,因为这篇文章多次用到配置SDK和JDK这一知识点,再次讲一遍。
1.1 配置SD ...
Android AOSP基础(四)Source Insight和Android Studio导入系统源码
本文首发于微信公众号「后厂技术官」
关联系列Android AOSP基础系列Android系统启动系列
前言在上一篇文章Android AOSP基础(三)Android系统源码的整编和单编中,我们对系统源码进行了编译,这篇文章我们接着来学习如何将系统源码导入到编辑器中,以便于查看和调试源码。关于查看源码,可以使用Android Studio、Eclipse、Sublime、Source Insight等软件,这里我推荐使用Source Insight,但是有的同学可能不是很习惯,而且Source Insight是Windows平台的软件,Mac平台用不了,那么使用Android Studio是一个不错的选择,而且使用Android Studio还可以调试源码。
1. Source Insight导入系统源码在《Android进阶解密》的第一章,我讲解了Source Insight如何导入系统源码,可能有的同学没有买这本书,这里再来讲一遍。Source Insight只能查看源码,不能调试源码,如果只想在Source Insight中查看源码,可以直接从百度网盘:https:// ...
Android Gradle (一)Gradle的Android插件入门
本文首发于微信公众号「后厂技术官」
相关文章Gradle核心思想(一)为什么现在要用Gradle?Gradle核心思想(二)Gradle入门前奏Gradle核心思想(三)Groovy快速入门指南Gradle核心思想(四)看似无用,实则重要的Gradle WrapperGradle核心思想(五)通俗易懂的Gradle插件讲解Gradle核心思想(六)自定义Gradle插件的三种方式
前言在Gradle核心思想这个系列中我尽量避免了Gradle和Android之间的关联,这是因为在了解Gradle的核心思想后,可以更好的理解Android Gradle,因此这里强烈建议先阅读Gradle核心思想系列。Android Gradle或者Gradle for Android,实际上指的就是Gradle的Android插件,这一篇我们入个门。
1.什么是Gradle的Android插件在Gradle核心思想(五)通俗易懂的Gradle插件讲解这篇文章中我们知道,Gradle有很多插件,为了支持Android项目的构建,谷歌为Gradle编写了Android插件,新的Android构建系统就 ...
Android AOSP基础(三)Android系统源码的整编和单编
本文首发于微信公众号「后厂技术官」
关联系列Android AOSP基础系列Android系统启动系列
前言在上一篇文章Android AOSP基础(二)AOSP 源码下载中,我们顺利的将AOSP下载了下来,很多时候我们不仅仅需要去查看源码,还有以下的几个需求:
动态调试Android系统源码
定制Android系统
将最新版本的Android系统刷入到自己的Android设备中
将系统源码导入到Android Studio中
为了实现这些需求,就需要我们去编译系统源码。
1.编译系统概述了解以下一些概念,会对Android编译系统有大概的了解。MakefileAndroid平台的编译系统,其实就是用Makefile写出来的一个独立项目。它定义了编译的规则,实现了“自动化编译”,不仅把分散在数百个Git库中的代码整合起来、统一编译, 而且还把产物分门别类地输出到一个目录,打包成手机ROM,还可以生成应用开发时所使用的SDK、NDK等。因此,采用Makefile编写的编译系统,也可以称为Makefile编译系统。Android.mkMakefile编译系统的一部分,定义了一个 ...
Android AOSP基础(二)AOSP源码和内核源码下载
本文首发于微信公众号「后厂技术官」
前言这篇文章我们来学习如何下载AOSP 源码,如果你还没有Linux 环境,请查看Android AOSP基础(一)VirtualBox 安装 Ubuntu这篇文章,另外如果你不需要编译源码,或者不需要最新的源码,可以直接从百度网盘:https://pan.baidu.com/s/1ngsZs 将源码下载下来。
1.关于AOSPAOSP(Android Open Source Project)是Google开放的Android 开源项目,中文官网为:https://source.android.google.cn/。AOSP通俗来讲就是一个Android系统源码项目,通过它可以定制 Android 操作系统,国内手机厂商都是在此基础上开发的定制系统。因为墙的缘故,如果无法连接谷歌服务器获取AOSP源码,可以从 清华大学镜像站或者 中科大镜像。本篇文章以清华大学镜像站为例。
2. 下载 repo工具Android源码包含数百个git库,光是下载这么多的git库就是一项繁重的任务,所以Google开发了repo,它是用于管理Android版本库的 ...
Android AOSP基础(一)VirtualBox 安装 Ubuntu
本文首发于微信公众号「后厂技术官」
前言在Android进阶三部曲第二部《Android进阶解密》的第一章,我介绍了两种阅读源码的方式,其中一种是从百度网盘:https://pan.baidu.com/s/1ngsZs 将源码下载下来,然后用SouceInsight来查看,这种方式很便捷,适合去阅读源码,但是有两个弊端,一个是无法获取最新的源码,另一个是不能够编译源码。本系列就是来讲解下载和编译源码相关知识的。编译源码需要在 Linux 环境下进行,很多同学的系统不是Ubuntu,但是可以在Windows和Mac上使用VirtualBox 来安装 Ubuntu,这篇文章会讲解Windows10环境下的安装过程,Mac环境也是大同小异。另外Windows 10下也可以在Microsoft Store中下载Ubuntu软件,可以去尝试下。
准备工作需要下载两个文件:
VirtualBox:下载地址为:https://www.virtualbox.org/wiki/Downloads,我的版本为VirtualBox 6.0.4。
Ubuntu桌面版:下载地址为:https://www ...
Gradle核心思想(六)自定义Gradle插件的三种方式
本文首发于微信公众号「后厂技术官」
相关文章Gradle核心思想(一)为什么现在要用Gradle?Gradle核心思想(二)Gradle入门前奏Gradle核心思想(三)Groovy快速入门指南Gradle核心思想(四)看似无用,实则重要的Gradle WrapperGradle核心思想(五)通俗易懂的Gradle插件讲解
前言在上一篇文章Gradle核心思想(五)通俗易懂的Gradle插件讲解中,我介绍了什么是Gradle插件、如何使用Gradle插件、Gradle插件的作用和好处,由于篇幅的原因,还有一个重要的知识点没有讲,那就是自定义Gradle插件(自定义Gradle对象插件)。自定义Gradle插件主要有三种方式,分别是build.gradle中编写、buildSrc工程项目中编写、独立项目中编写。建议阅读本文前,先阅读开头列出的本系列相关文章。
1.build.gradle对象插件是实现了org.gradle.api.plugins接口的插件,这个接口中只定义个一个简单的apply方法,想要实现自定义插件就需要去实现org.gradle.api.plugins接口。 ...