Flutter开发 7.Widget-Text

Flutter开发 7.Widget-Text

打开lib/main.dart文件, 将里边的代码全部删除，从头开始写自己写一下。

import 'package:flutter/material.dart';

void main() {
  runApp(const Text(
    "First Text Content",
    textDirection: TextDirection.ltr,
  ));
}

这段代码在iOS模拟器上运行的效果如下：

我们先来简单的说明一下这段代码，首先任何程序都会有一个main函数入口， 哪怕有些不叫这个名字，而我们要做一款APP，所以我们就使用这个runApp的函数来做为主入口，这个方法的源码可以看到：

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

ensureInitialized方法, 返回的是一个单例的WidgetsFlutterBinding对像

  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance!;
  }

得到这个单例对像后，将runApp函数传入的widget参数app，传给了scheduleAttachRootWidget并关联为最底层的widget.(注意：两个…可以换行来调用方法，与单个.在同一行调用方法一样的)，最后通过scheduleWarmUpFrame这方法启动渲染调度。

总之，我们调用runApp函数,传入的这个widget将做为整个 APP的根部局的widget, 这章主要是对Text这个Widget进行讲解，因为不做过深入的源码说明，后面会有单独的源码分析。这里只要有了一个概念，调用这个runApp函数来实现就行了。

上面例子中文字显在左上角，看不见，我们先将它调整到屏幕中央位置, 因为我们变更的根部局，所在不能直接用hot reload. 需要重新启动APP.

import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
      child: Text(
    "First Text Content",
    textDirection: TextDirection.ltr,
  )));
}

可以看到我们只是在Text外面新加了一个widget名字叫Center, 通过名字就可以知道，他就是为了让的子部局（child），居中显示.

接下来我们设置下Text中常用的属性值，示例中我们使用了自定义的第三方字体，如果不知道如何相入第三方字体可以查看：Flutter引入第三方字体

import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
      child: Text(
    "First Text Content 1234567890", ///文本内容
    //文本方向 如果需要使用rtl需要add flutter_localizations package to your pubspec.yml
    textDirection: TextDirection.ltr,
    textAlign: TextAlign.center, //对齐方式
    overflow: TextOverflow.ellipsis, //超长后截断方式 ...
    maxLines: 1, //最大行数
    textScaleFactor: 1.6, //放大缩小比例
    style: TextStyle(
      fontFamily: "zzFontFamily", //所用的字体、这里用的是自定义的字体
      fontStyle: FontStyle.normal, //文本显示样式
      fontWeight: FontWeight.bold, //粗体
      letterSpacing: 2, //字母之间的间距
      wordSpacing: 4, //单词之间的间距
      fontSize: 29, //字体大小
      color: Color.fromARGB(255, 174, 0, 255), // 字体颜色
    ),
  )));
}

属性名	说明
textDirection	文本方向 (如果需要使用rtl,需要在 pubspec.yml中添加 flutter_localizations包)
textAlign	文本对齐方式
overflow	超长后截断方式
maxLines	最大行数
textScaleFactor	放大缩小比例
style \ fontFamily	指定字体
style \ fontStyle	文本显示样式(斜体等)
style \ fontWeight	字体重量 如：FontWeight.w500、FontWeight.bold
style \ letterSpacing	字母之间的间距
style \ wordSpacing	单词之间的间距
style \ fontSize	字体大小
style \ color	字体颜色

好， 接下来运行一下看看效果