目录
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: 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跟安卓的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
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐