前言

一: Flutter原理浅析

1.1 Flutter与React Native的区别

• React Native
  • 依赖原生，本质是在原生上的包装。程序运行时需要将JS代码转换成原生代码执行。效率低，跨平台风格差异大，高度依赖原生。
• Flutter
  • 对原生依赖较低，拥有自己的渲染引擎，里面包含了虚拟机。效率高，低依赖原生，跨平台风格高度统一。但是安装包较大。

1.2 增量渲染

Flutter渲染机制的核心是增量渲染，当渲染树的某个组件修改了，就会重新渲染那个组件，而不是全部重新渲染，而不会更改的组件，会推荐使用const修饰，所以效率很高。

二: Hello Flutter

2.1 material包

使用Flutter的基础组件，需要导入material包，类似iOS中的UIKit。iOS里显示的是UIView这样的视图控件，Flutter里所有界面元素都称为widget（注意：widget是界面的描述，并不是界面。后续单独开篇分析。）。

import 'package:flutter/material.dart';

2.2 runApp

在iOS中需要将UI控件添加到window上进行显示，而Flutter则是通过runApp方法给定小部件并将其连接到屏幕上进行显示。添加Center和Text两个Widget，设置显示内容和阅读方向。

void main() {
  // 执行runApp，传入widget，就会显示到屏幕上了
  runApp(
    // Flutter渲染机制的核心是增量渲染，所以凡是不会更改的widget，
    // 编译器都会推荐使用const修饰，这就是Flutter效率高的原因。
    const Center(
      child: Text(
        'hello flutter',
        // 文字阅读方向，从左往右阅读，
        // APP中一般不需要设置，但是直接将Text添加到Center中呈现在屏幕上时需要设置
        textDirection: TextDirection.ltr,
      ),
    )
  );
}

运行项目，hello flutter就显示到界面上了。

三: Text组件

3.1 什么是Text

Text widget是显示单样式的文本字符串。可显示单行或多行。

style参数是可选的。省略后，文本将使用最近封闭的DefaultTextStyle的style。如果给定样式的TextStyle.inherit属性为true（默认值），则给定样式将与最近的封闭式DefaultTextStyle合并。例如，这种合并行为在使用默认字体系列和大小时使文本加粗非常有用。

使用Text.rich构造函数，Text widget可以显示样式不同的TextSpan的段落。以下示例显示每个单词的不同风格的Hello beautiful world。

3.2 互动

要使Text widget对触摸事件做出反应，请使用GestureDetector.onTap处理程序将其包装在GestureDetector widget中。后续介绍。

四: 自定义widget

自定义Widget，需要自定义一个类，继承StatelessWidget或StatefulWidget，重载build方法返回Widget。

五: 缓存锁死解决办法

注意：Android Studio执行Flutter项目时强退有可能会导致缓存锁死，此时就需要删除Flutter SDK里的lockfile缓存文件，具体路径：flutter -> bin -> cache -> lockfile。

总结

关于Text组件的其他相关知识可以查看相关API或文档。

敬请关注，持续输出。