flutter13 - 文本及样式组件

Text文本组件

Key key,
this.style, //样式
this.strutStyle,
this.textAlign,//对齐方式
this.textDirection,//文字方向
this.locale,
this.softWrap,
this.overflow,//溢出显示
this.textScaleFactor,//字体大小的缩放因子
this.maxLines,//最大行数
this.semanticsLabel,
this.textWidthBasis,

• textAlign：文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐，但因为Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义。下面我们指定一个较长的字符串：

• maxLines、overflow：指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，本例中指定的截断方式TextOverflow.ellipsis`，它会将多余文本截断后以省略符“…”表示；TextOverflow的其它截断方式请参考SDK文档。

  textScaleFactor：代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery`，那么会默认值将为1.0。

TextStyle

this.inherit = true,
this.color, //字体颜色
this.backgroundColor,//背景颜色
this.fontSize,//字体大小
this.fontWeight,//字体加粗
this.fontStyle,
this.letterSpacing,//字母间隔
this.wordSpacing,//单词间隔
this.textBaseline,//
this.height,//高度
this.locale,
this.foreground,//前景
this.background,//背景
this.shadows,//阴影
this.fontFeatures,
this.decoration,//装饰,下划线什么的
this.decorationColor,//装饰颜色
this.decorationStyle,//装饰样式
this.decorationThickness,//装饰厚度
this.debugLabel,
String fontFamily,//字体
List<String> fontFamilyFallback,

• height：该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
• fontFamily ：由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。
• fontSize：该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别：
  • fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
  • textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。

TextSpan

对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('文本及其样式'),
        ),
        body: TextDemo(),
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text.rich(
        TextSpan(
          children: [//children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan
            TextSpan(text: "Home"),
            TextSpan(
                text: "https:www.baidu.com",
                style: TextStyle(
                  color: Colors.yellow,
                )),
          ],
        ),
      ),
    );
  }
}

DefaultTextStyle

在Widget树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），因此，如果在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('文本及其样式'),
        ),
        body: TextDemo(),
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: DefaultTextStyle(
        //设置文本样式
        style: TextStyle(
          color: Colors.red,
          fontSize: 32.0,
        ),
        textAlign: TextAlign.center,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("Hello"),
            Text("Word"),
            Text( //不继承的Text
              "Hello world",
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Colors.blue,
                fontSize: 18.0,
                height: 1.2,
                fontFamily: "Courier",
                background: new Paint()..color = Colors.yellow,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

字体

使用字体分两步完成:

第一步在pubspec.yaml中声明他们, 然后通过TextStyle属性使用字体

要将字体文件打包到应用中，和使用其它资源一样，要先在pubspec.yaml中声明它。然后将字体文件复制到在pubspec.yaml中指定的位置。如：

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

使用字体

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);

Package中的字体

使用Package中定义的字体，必须提供package参数。例如，假设上面的字体声明位于my_package包中。然后创建TextStyle的过程如下：

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
  package: 'my_package', //指定包名
);

如果在package包内部使用它自己定义的字体，也应该在创建文本样式时指定package参数，如上例所示。

一个包也可以只提供字体文件而不需要在pubspec.yaml中声明。 这些文件应该存放在包的lib/文件夹中。字体文件不会自动绑定到应用程序中，应用程序可以在声明字体时有选择地使用这些字体。假设一个名为my_package的包中有一个字体文件：

lib/fonts/Raleway-Medium.ttf

然后，应用程序可以声明一个字体，如下面的示例所示：

 flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf
           weight: 500

lib/是隐含的，所以它不应该包含在asset路径中。

在这种情况下，由于应用程序本地定义了字体，所以在创建TextStyle时可以不指定package参数：

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);