【Flutter】基础部件之Text

·  阅读 183
【Flutter】基础部件之Text

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」。

前言

前面两篇文章介绍了Flutter开发语言的Dart基础语法Dart面向对象,本文开始将介绍一些Flutter的基础组件。

一: Flutter原理浅析

1.1 FlutterReact Native的区别

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

1.2 增量渲染

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

二: Hello Flutter

2.1 material

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

import 'package:flutter/material.dart';
复制代码

2.2 runApp

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

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

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

image.png

三: Text组件

3.1 什么是Text

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

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

image.png

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

image.png

3.2 互动

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

四: 自定义widget

自定义Widget,需要自定义一个类,继承StatelessWidgetStatefulWidget,重载build方法返回Widget

五: 缓存锁死解决办法

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

image.png

总结

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

敬请关注,持续输出。

分类:
iOS
标签:
分类:
iOS
标签: