Flutter 系列文章：Flutter Text 控件介绍

时间 2019-12-07

标签 flutter 系列文章 text 控件介绍栏目 HTML 繁體版

原文原文链接

flutter Text 控件介绍

1、使用方法

构造方法

设置普通的text Text("")

Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }）
  
    Text(
      'Hello, $_name! How are you?',
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),
    )
  
复制代码

设置textSpan Text.rich()

Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })
  
    Text.rich(
      TextSpan(
        text: 'Hello', // default text style
        children: <TextSpan>[
          TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic,color: Colors.red,fontSize: 20)),
          TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20)),
        ],
    )
  )
复制代码

2、经常使用属性

设置样式经过TextStyle 设置文字的样式

TextStyle({
    this.inherit = true,//是否继承
    this.color,//字体颜色
    this.fontSize,//字体大小
    this.fontWeight,//字体厚度，也就是字体粗细
    this.fontStyle,//字体样式 normal或者italic
    this.letterSpacing,//字母间隙(负值能够让字母更紧凑)
    this.wordSpacing,//单词间隙(负值能够让单词更紧凑)
    this.textBaseline,//文本绘制基线(alphabetic/ideographic)
    this.height,//高度
    this.locale,//区域设置
    this.foreground,//设置前景
    this.background,//设置背景颜色
    this.shadows,//设置阴影
    this.decoration,//设置文字装饰(none/underline/overline/lineThrough)
    this.decorationColor,//设置文字装饰颜色
    this.decorationStyle,//文字装饰的风格(solid/double/dotted/dashed/wavy)
    this.debugLabel,//？
    String fontFamily,//？
    String package,//?
  })
复制代码

二、设置字体对齐方式 TextAlignbash

center 将文本对齐容器的中心
end 对齐容器后缘上的文本。

对于从左到右的文本（TextDirection.ltr），这是右边缘。
 对于从右到左的文本（TextDirection.rtl），这是左边缘。
复制代码

justify 拉伸结束的文本行以填充容器的宽度,对齐边缘。app
left 对齐容器左边缘的文本。less
right 对齐容器右边缘的文本。ide
start 对齐容器前缘上的文本。字体

对于从左到右的文本（TextDirection.ltr），这是左边缘。
对于从右到左的文本（TextDirection.rtl），这是正确的边缘。
复制代码

三、maxLines 文本要跨越的可选最大行数。若是文本超过给定的行数，则会根据溢出将其截断。ui

四、textDirection 用于设置文本的对齐方式this

有些语言是从左到右书写的（例如，英语，泰米尔语或中文），而其余语言是从右到左书写的（例如阿拉姆语，希伯来语或乌尔都语）。有些也是混合写的，例如阿拉伯语大可能是从右到左书写的，数字从左到右书写。textDirection 主要就是用于处理文字的对齐形式。
TextDirection有两种枚举:

TextDirection.trl 从左到右
    TextDirection.trl 从右到左
复制代码

五、overflow 当文字超出屏幕的时候，设置处理方式spa

TextOverflow.clip(末位裁剪)
    TextOverflow.fade(末位渐隐)
    TextOverflow.ellipsis(末位省略号)
复制代码

六、设置字体显示倍率debug

textScaleFactor: 2.0,//设置字体显示倍率为原来字体的两倍
复制代码

3、一个完整的例子

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: TextPageDemo(title: 'Text Demo'),
    );

  }
}


class TextPageDemo extends StatefulWidget {
  TextPageDemo({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _TextPageDemoState createState() => _TextPageDemoState();
}

class _TextPageDemoState extends State<TextPageDemo>{

  @override
  Widget build(BuildContext context) {
    var _name = "flutter ";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: <Widget>[

            Text(
              '1.Hello, $_name! How are you? \n',
              textAlign: TextAlign.center,
              style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),
            ),
            // 例子3 设置TextSpan
            Text.rich(
              TextSpan(
                text: '2. Hello', // default text style
                children: <TextSpan>[
                  TextSpan(
                      text: ' beautiful ',
                      style: TextStyle(fontStyle: FontStyle.italic,color: Colors.red,fontSize: 20,debugLabel: "获得的",fontFamily: "aaaaaaa")
                  ),
                  TextSpan(
                      text: 'world \n',
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20)
                  ),
                ],
            )
          ),
           Text(
             //例子3 设置当文字的对齐形式
             '3. Hello flutter! Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter! \n',
//             enum TextAlign {
//           /// Align the text on the left edge of the container.
//           left,
//           /// Align the text on the right edge of the container.
//           right,
//           /// Align the text in the center of the container.
//           center,
//           /// Stretch lines of text that end with a soft line break to fill the width of
//           /// the container.
//           /// Lines that end with hard line breaks are aligned towards the [start] edge.
//           justify,
//           /// Align the text on the leading edge of the container.
//           ///
//           /// For left-to-right text ([TextDirection.ltr]), this is the left edge.
//           ///
//           /// For right-to-left text ([TextDirection.rtl]), this is the right edge.
//           start,
//           /// Align the text on the trailing edge of the container.
//           ///
//           /// For left-to-right text ([TextDirection.ltr]), this is the right edge.
//           ///
//           /// For right-to-left text ([TextDirection.rtl]), this is the left edge.
//           end,
//           }
             textAlign: TextAlign.left,
             maxLines: 5,
             textDirection: TextDirection.ltr,
           ),
            Text(
            // 例子4 设置当文字超出屏幕的时候，如何处理 ，及设置文本的书写方向
              '4. Hello flutter! Hellod flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!\n',
              textAlign: TextAlign.left,
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 20),
              overflow: TextOverflow.fade,
            ),
            Text(
              //例子5 设置是否自动换行
              '5. Hello flutter! Hellod flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!\n',
              textAlign: TextAlign.left,
              softWrap: true,//设置是否自动换行
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 20),
              overflow: TextOverflow.fade,
            ),
            Text(
              //例子6 设置字体显示倍率,能够经过设置字体显示倍率调整文字的大小
              '6.Hello flutter text \n',
              textAlign: TextAlign.left,
              softWrap: true,//设置是否自动换行
              textDirection: TextDirection.rtl,
              style: TextStyle(fontSize: 20),
              overflow: TextOverflow.fade,
              textScaleFactor: 2.0,//设置字体显示倍率为原来字体的两倍
            ),

          ],

        ),
      ),
    );
  }
}






复制代码