美文网首页
2 文本及样式

2 文本及样式

作者: lltree | 来源:发表于2018-12-25 10:21 被阅读16次

    原文在此,此处只为学习

    Text

    Text文本属性如下所示

    class Text extends StatelessWidget {
    
      const Text(this.data, {
        Key key,
        this.style,
        this.textAlign, //文本对齐方式
        this.textDirection,
        this.locale,
        this.softWrap,
        this.overflow,//文本截断方式
        this.textScaleFactor,//字体大小缩放因子
        this.maxLines,//显示最大行
        this.semanticsLabel,
      }) : assert(data != null),
           textSpan = null,
           super(key: key);
    }
    

    Text用于显示简单样式文本,它包含一些控制文本显示样式的一些属性,一个简单的例子如下:

    Text("Hello world",
      textAlign: TextAlign.center,
    );
    
    Text("Hello world! I'm Jack. "*4,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    );
    
    Text("Hello world",
      textScaleFactor: 1.5,
    );
    
    

    运行效果:


    • textAlign:文本的对齐方式;可以选择左对齐、右对齐还是居中。注意,对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐,但因为Text文本内容宽度不足一行,Text的宽度和文本内容长度相等,那么这时指定对齐方式是没有意义的,只有Text宽度大于文本内容长度时指定此属性才有意义。下面我们指定一个较长的字符串:
    Text("Hello world "*6,  //字符串重复六次
      textAlign: TextAlign.center,
    );
    

    运行效果如下:


    image-20180829104807535.png

    字符串内容超过一行,Text宽度等于屏幕宽度,第二行文本便会居中显示。

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

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

    TextStyle

    TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。我们看一个示例:

    Text(
                  "我是文本",
                  textAlign: TextAlign.right,
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18.0,
                    height: 1.2,
                    fontFamily: "PingFangSC-Medium",
                    background: new Paint()..color = Colors.purple,
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.dashed,
                  ),
                ),
    

    运行效果:



    此示例只展示了TextStyle的部分属性,它还有一些其它属性,属性名基本都是自解释的,在此不再赘述,读者可以查阅SDK文档。值得注意的是:

    • height:该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height。

    • fontFamily :由于不同平台默认支持的字体集不同,所以在手动指定字体时一定要先在不同平台测试一下。

    • fontSize:该属性和Text的textScaleFactor都用于控制字体大小。但是有两给主要区别:

    fontSize可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。
    textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整,而fontSize通常用于单个文本。

    TextSpan富文本

    在上面的例子中,Text的所有文本内容只能按同一种样式,如果我们需要对一个Text内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”。我们看看TextSpan的定义:

      const TextSpan({
        this.style,
        this.text,
        this.children,
        this.recognizer,
      });
    

    其中styletext属性代表该文本片段的样式和内容。children是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。下面我们看一个效果,然后用TextSpan实现它。

    Text.rich(TextSpan(
        children: [
         TextSpan(
           text: "Home: "
         ),
         TextSpan(
           text: "https://flutterchina.club",
           style: TextStyle(
             color: Colors.blue
           ),  
           recognizer: _tapRecognizer
         ),
        ]
    ))
    
    • 上面代码中,我们通过TextSpan实现了一个基础文本片段和一个链接片段,然后通过Text.rich方法将TextSpan添加到Text中,之所以可以这样做,是因为Text其实就是RichText的一个包装,而RichText是可以显示多种样式(富文本)的widget。
    • _tapRecognizer,它是点击链接后的一个处理器(代码已省略),关于手势识别的更多内容我们将在后面单独介绍。

    DefaultTextStyle

    在widget树中,文本的样式默认是可以被继承的,因此,如果在widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而DefaultTextStyle正是用于设置默认文本样式的。下面我们看一个例子:

    DefaultTextStyle(
      //1.设置文本默认样式  
      style: TextStyle(
        color:Colors.red,
        fontSize: 20.0,
      ),
      textAlign: TextAlign.start,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("hello world"),
          Text("I am Jack"),
          Text("I am Jack",
            style: TextStyle(
              inherit: false, //2.不继承默认样式
              color: Colors.grey
            ),
          ),
        ],
      ),
    );
    

    上面代码中,我们首先设置了一个默认的文本样式,即字体为20像素(逻辑像素)、颜色为红色。然后通过DefaultTextStyle 设置给了子树Column节点处,这样一来Column的所有子孙Text默认都会继承该样式,除非Text显示指定不继承样式,如代码中注释2。示例运行效果如下:


    使用字体

    可以在Flutter应用程序中使用不同的字体。例如,我们可能会使用设计人员创建的自定义字体,或者其它第三方的字体,如Google Fonts中的字体。本节将介绍如何为Flutter应用配置字体,并在渲染文本时使用它们。

    在Flutter中使用字体分两步完成。首先在pubspec.yaml中声明它们,以确保它们会打包到应用程序中。然后通过TextStyle属性使用字体。

    在asset中声明

    要将字体打文件打包到应用中,和使用其它资源一样,要先在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中的字体

    相关文章

      网友评论

          本文标题:2 文本及样式

          本文链接:https://www.haomeiwen.com/subject/fbgzkqtx.html