Flutter学习（一）

以你之姓@ 2023-06-30 04:29 14阅读 0赞

目录  
[Flutter学习（一）][Flutter]  
[Flutter学习（二）-FlutterGo学习][Flutter_-FlutterGo]

# 概念 #

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

# pubspec.yaml配置文件说明 #

参考：[Flutter 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: flutterdemo
        description: A new Flutter application.
         
        dependencies:
          flutter:
            sdk: flutter
         
         #添加依赖packages ^表示适配和当前大版本一致的版本，~表示适配和当前小版本一致的版本
          cupertino_icons: ^0.1.2
          english_words: ^3.1.0
         # image_picker: ^0.4.8
         
        dev_dependencies:
          flutter_test:
            sdk: flutter
         
          #启用国际化
          flutter_localizations:
            sdk: flutter
         
        #定义常量
         
        #数组
        server:
            - aaaaaa
            - bbbbbb
        	- dddddd
        #常量
        age: 22         # int
        boolitem: true  #定义一个boolean值
        name: 'hello'   #定义一个string
         
         
        flutter:
         
          # 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: Schyler
               fonts:
               - asset: fonts/Schyler-Regular.ttf
                - asset: fonts/Schyler-Italic.ttf
                   style: italic
             - family: Trajan Pro
               fonts:
              - asset: fonts/TrajanPro.ttf
              - asset: fonts/TrajanPro_Bold.ttf
                weight: 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]  
Flutter跟安卓的Activity、iOS的ViewController一样拥有自己的生命周期， Flutter中一切都是Widget，渲染方式有点像H5的DOM树。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93b25nd29vLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]  
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路径是不能省略的。  
![在这里插入图片描述][20200120111715579.png]  
所以为了方便使用，我新建的images包路径直接在根目录下。

# Android studio快捷键 #

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

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

[Flutter]: https://wongwoo.blog.csdn.net/article/details/103985510
[Flutter_-FlutterGo]: https://wongwoo.blog.csdn.net/article/details/104008704
[Flutter 1]: https://flutter.cn/docs
[Flutter pubspec.yaml]: https://blog.csdn.net/u010126792/article/details/82347269
[flutter]: https://www.jianshu.com/p/7e8dff26f81a
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93b25nd29vLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200117111328213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93b25nd29vLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[20200120111715579.png]: https://img-blog.csdnimg.cn/20200120111715579.png