【Flutter之旅】基础组件介绍

环境介绍以及参考文献

本示例是在 Linux 16.04.1-Ubuntu 搭配 VS Code 使用。

《Flutter实战》电子书
Flutter中文网

文本及样式

Flutter 用 Text 来显示简单样式文本，包含一些控制文本显示样式的一些属性。

文本类解析及相关使用

根据源码来解析其用法

//Text 类
const Text(
  String this.data, { //data 不能为 null，也就是文本要显示的字符串
  Key? key,
  this.style, //文本样式，默认为 DefaultTextStyle 
  this.strutStyle, //简单来说是控制字体的一种方式
  this.textAlign, //文本对齐方式，只有 Text 宽度大于文本内容长度时指定此属性才有意义
  this.textDirection, //文本显示方向，正序或者倒序
  this.locale, //当相同的 Unicode 字符可以根据区域设置以不同方式呈现时，用于选择字体
  this.softWrap, //文本是否应在软换行符处中断
  this.overflow, //如何处理文本超出范围
  this.textScaleFactor, //代表文本相对于当前字体大小的缩放因子
  this.maxLines, //文本的可选最大行数，必要时换行。如果文本超过给定的行数，将根据[overflow]截断
  this.semanticsLabel, //文本的替代语义标签
  this.textWidthBasis, //一行或多行文本宽度的不同方式
  this.textHeightBehavior, //定义如何在文本上方和下方应用 [TextStyle.height]
}) : assert(
        data != null,
        'A non-null String must be provided to a Text widget.',
      ),
      textSpan = null,
      super(key: key);

// 展开讲述 style 中的 TextStyle
// TextStyle 用于指定文本显示的样式如颜色、字体、粗细、背景等
const TextStyle({
  this.inherit = true, //是否继承父文本中的值替换空值
  this.color, //文本颜色
  this.backgroundColor, //文本背景颜色
  this.fontSize, //文本字体大小
  this.fontWeight, //文本字体粗细
  this.fontStyle, //文本字体变体，如斜体
  this.letterSpacing, //文本字母之间的间隔，负值用来拉近距离
  this.wordSpacing, //文本字段之间的间隔，负值用来拉近距离
  this.textBaseline, //用于对齐文本的水平线
  this.height, //该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于 fontSize * height
  this.leadingDistribution, //文本上下文间距，多行生效
  this.locale, //根据语言地区选择特定字体
  this.foreground, //字体颜色，与 color 互斥
  this.background, //背景颜色，与 backgroundColor 互斥
  this.shadows, //字体阴影
  this.fontFeatures, //文本的字体特征
  this.decoration, //在文本附近绘制的装饰，如下划线
  this.decorationColor, //文本装饰颜色
  this.decorationStyle, //文本装饰样式
  this.decorationThickness, //文本装饰粗细相较于字体粗细的倍数
  this.debugLabel, // debug版本适用，标签
  String? fontFamily, //手动指定的字体
  List<String>? fontFamilyFallback, //当高优先级字体找不到时，需要寻找的有序字体列表
  String? package, //存储字体的路径
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
      _fontFamilyFallback = fontFamilyFallback,
      _package = package,
      assert(inherit != null),
      assert(color == null || foreground == null, _kColorForegroundWarning),
      assert(backgroundColor == null || background == null, _kColorBackgroundWarning);
    

示例用法

Text("Hello world", textAlign: TextAlign.left);
Text("Hello world! I'm Jack. "*4, maxLines: 1, overflow: TextOverflow.ellipsis);
Text("Hello world", textScaleFactor: 1.5);
Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,  
    fontFamily: "Courier",
    background: new Paint()..color=Colors.yellow,
    decoration:TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
);
Text.rich(TextSpan( //TextSpan 类，代表文本的一个片段
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),
     ),
    ]
));

使用第三方字体

在 pubspec.yaml 声明字体

将字体文件复制到在 pubspec.yaml 中指定的位置。

flutter:
  fonts:
    - family: Raleway