目录
Flutter学习（一）
Flutter学习（二）-FlutterGo学习

概念

参考：Flutter 开发文档
在 Flutter 中，几乎所有都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。一个 widget 的主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widgets 来显示自己。
在 Flutter 的响应式风格的框架中，调用 setState() 会为 State 对象触发 build() 方法，从而导致对 UI 的更新。
flutter一切皆组件，UI中用到的东西基本都是组件，所以对组件的熟悉是很重要的。

pubspec.yaml配置文件说明

参考：Flutter pubspec.yaml配置文件说明
类似android开发中的AndroidManifest.xml，Gradle配置文件，Flutter项目根目录下的pubspec.yaml文件是Flutter的配置文件。
虽然都是移动开发中的配置文件，但差别还是挺大的。
在Flutter中，虽然在Flutter项目中的Android文件夹下有Gradle文件，但只有在添加平台相关所需的依赖关系时才使用这些文件。否则，应该使用pubspec.yaml声明用于Flutter的外部依赖项。
完整配置文件

    #name很重要，如果修改了name所有的dart的文件的import前引用的本地的文件啊的包名都需要修改name: flutterdemodescription: A new Flutter application.dependencies:flutter:sdk: flutter#添加依赖packages ^表示适配和当前大版本一致的版本，~表示适配和当前小版本一致的版本cupertino_icons: ^0.1.2english_words: ^3.1.0# image_picker: ^0.4.8dev_dependencies:flutter_test:sdk: flutter#启用国际化flutter_localizations:sdk: flutter#定义常量#数组server:- aaaaaa- bbbbbb- dddddd#常量age: 22         # intboolitem: true  #定义一个boolean值name: 'hello'   #定义一个stringflutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: true# To add assets to your application, add an assets section, like this:#添加资源，不单单是图片，images是个和pubspec.yaml配置文件同级的目录，如果不同级，需要添加..assets:- images/park.jpg- images/lake.jpg- images/touxiang.jpg#  - images/a_dot_burr.jpeg#  - images/a_dot_ham.jpeg#字体设置fonts:- family: Schylerfonts:- asset: fonts/Schyler-Regular.ttf- asset: fonts/Schyler-Italic.ttfstyle: italic- family: Trajan Profonts:- asset: fonts/TrajanPro.ttf- asset: fonts/TrajanPro_Bold.ttfweight: 700

name:这里应该叫包名。
如果修改了配置文件中的name（flutterdemo —flutterdemo111），下面对本地文件的引用前的包名都需要修改：import ‘package:flutterdemo/FourPage.dart’;

引入图片资源：
assets: //引入图片资源，识别应用程序所需的asset，可以任意文件夹，Flutter将asset放置到称为 asset bundle 的特殊存档中，可以是图片，文本等资源。

- images/park.jpg
- images/lake.jpg

不同尺寸图片资源写法：

…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png

读取文本：

import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
//读取文件是的路径，就是assets下配置的
return await rootBundle.loadString('assets/config.json');
}

使用图片：

//图片路径的配置
new AssetImage('graphics/background.png'),

加载依赖包中图片：
//配置name的作用，需要读取其他外部package下的资源时

new AssetImage('icons/heart.png', package: 'my_icons')

这里顺便说一下更新应用自身图标，只需要按照android，Ios自己的规范进行更新：
fonts：支持字体的设置，可以使用自定义字体。
设置方式：

- family: Schyler
fonts:
- asset: fonts/Schyler-Regular.ttf
- asset: fonts/Schyler-Italic.ttf
style: italic

使用方式：

style: new TextStyle( fontFamily: 'Schyler', fontSize: 24.0, ),

启用国际化，materialDesign：

 flutter_localizations:
sdk: flutter

flutter:
uses-material-design: true

生命周期

参考：flutter生命周期
Flutter跟安卓的Activity、iOS的ViewController一样拥有自己的生命周期， Flutter中一切都是Widget，渲染方式有点像H5的DOM树。

lutter生命周期可以分为3个阶段：
1、实例化组件并添加到树，即Navigator.push；
2、状态变化，即打开新的widget或者依赖的上级widget发生变化；
3、从树中移除, 即Navigator.pop。

在Flutter中Widget都是不可变的，但实际上需要根据对应的状态刷新Widget。从而产生了StatelessWidget和StatefulWdiget, StatefulWidget是由2个对象Widget和State组成的。
为什么将State和Widget分开呢？
答案是性能， State管理状态（可以理解为Controller），Widget是UI（即View)。根据状态变化每次生成Widget(即View）可以节省内存，即不必每次创建状态对象State。

构造函数：
同其它高级语言，只执行一次；
initState：
插入到渲染树时调用，只执行一次。（类似Android Fragment的onCreateView函数）
didChangeDependencies：
1、在初始化initState后执行； 2、显示/关闭其它widget。 3、可执行多次；
didUpdateWidget：
上级节点rebuild widget时，即上级组件状态发生变化时会触发子widget执行didUpdateWidget;
deative:
有点像Android的onStop函数，在打开新的Widget或回到这个widget时会执行；可执行多次；
dispose：
类似于Android的onDestroy，在执行Navigator.pop后会调用该办法，表示组件已销毁；
reassemble：
点击闪电会执行，只用于调试时的hot reload。 release版本不会执行该函数。

常见业务场景：

Widget A打开Widget B： Navigator.push(B)
B构造函数—>B initState—>B didChangeDependencies—>B build—>A deactive—>A didChangeDependencies.
Widget B退出： Navigator.pop
A deactive—>A didChangeDependencies—>A build—>B deactive—>B dispose
可以看出， Flutter打开、关闭Widget时跟安卓、iOS的时序一样，都是先处理即将显示的界面。

activity生命周期和Flutter对应关系：
Flutter提供了WidgetsBindingObserver来监听AppLifecycleState，而AppLifecycleState有4种状态：
1、 resumed 界面可见，同安卓的onResume。
2、inactive界面退到后台或弹出对话框情况下，即失去了焦点但仍可以执行drawframe回调；同安卓的onPause；
3、paused应用挂起，比如退到后台，失去了焦点且不会收到drawframe回调；同安卓的onStop；
4、suspending， iOS中没用，安卓里就是挂起，不会再执行drawframe回调；

下面是生命周期：
1、初次打开widget时，不执行AppLifecycleState的回调；
2、按home键或Power键， AppLifecycleState inactive---->AppLifecycleState pause
3、从后台到前台：AppLifecycleState inactive—>ApplifecycleState resumed
4、back键退出应用： AppLifecycleState inactive—>AppLifecycleState paused

资源文件

在根目录下新建images包专门用来存放图片资源，然后在pubspec.yaml文件下增加如下语句：

  assets:- images/

申明了存放图片资源的包路径，然后使用，比如：

currentAccountPicture: CircleAvatar(backgroundImage: AssetImage('images/header.png'),),

注意如果路径不对，就会出现“Unable to load asset”的异常，如果images包放在assets包下面的话，所有路径签名都要加上assets路径，assets路径是不能省略的。

所以为了方便使用，我新建的images包路径直接在根目录下。

Android studio快捷键

支持的快捷键如下，不需要安装插件：

快捷键	描述
bab	创建AnimatedBuilder
bu	创建Build()方法
bufb	创建FutureBuilder
bulb	创建LayoutBuilder
buob	创建OrientationBuilder
bustf	创建StatefulBuilder
bustr	创建StreamBuilder
cc	创建CustomClipper
cen	创建Center
col	创建Column
con	创建完整的Container
cp	自定义CustomPainter
csv	CustomScrollView + SliverPadding创建列表，子控件带有边距
csv2	使用CustomScrollView + SliverGrid创建列表
gv	创建GridView.count
inh	创建Inherited
lv	创建基本的ListView
lvb	创建ListView.builder
lvd	创建带分割线的ListView
lvr	创建RadioListTile，可以单选的item
lvt	创建带有各种ListTile的ListView
mainstf	创建 StatefulWidget 控件
mainstl	创建 StatelessWidget 控件
me	创建方法
mep	创建私有方法
row	创建Row
sb	创建SizedBox
ssv	创建SingleChildScrollView
stanim	创建Stateful（带有 AnimationController）
stf	创建完整的StatefulWidget，包含生命周期相关方法。
stl	创建StatelessWidget
svc	创建CustomScrollView
te	创建一个标准的Text

Flutter学习（一）相关推荐

Flutter学习指南：文件、存储和网络
Flutter学习指南交互.手势和动画 UI布局和控件熟悉Dart语言编写第一个应用开发环境搭建本篇文章我们先学习 Flutter IO 相关的基础知识,然后在 Flutter学习指南:交互 ...
flutter学习（排雷）一
flutter官网:https://flutter.dev/docs/get-started/install 终于下定决心开始flutter学习了呢. 首先需要说的是flutter中的配置文件真的很严 ...
flutter scrollview_简单易上手的Flutter学习指南App,2020一起来玩转Flutter吧~
Flutter是谷歌的移动UI框架,可以快速在iOS.Android.Web和PC上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和 ...
Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
iOS程序猿的flutter学习之路
日常学习Flutter开发的积累推荐一些平时自己学习Flutter开发当中接触到的优秀文章 -------------------------基础知识 ----------------------- ...
Flutter 学习
Flutter 学习参照:https://book.flutterchina.club/ 参照:https://flutter.cn/docs/development/platform-integr ...
Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页前言思路分析案例代码结束语上图前言刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
Flutter学习-多子布局Widget
Flutter学习-多子布局Widget 1. Flex 2. Row组件 2.1 Row组件介绍 2.2 属性解析 2.2.1 mainAxisSize 2.2.2 mainAxisAlignmen ...

Flutter学习（一）

概念

pubspec.yaml配置文件说明

生命周期

资源文件

Android studio快捷键

Flutter学习（一）相关推荐

最新文章

热门文章