Flutter初学之路—`Text` (文本组件)

Text(文本组件)负责显示文本和定义显示样式,其提供了多个构造函数:

  • new Text:创建一个文本组件;
  • new Text.rich:创建一个拥有TextSpan的文本组件。

Text组件显示一个样式单一的文本字符串。根据布局约束,字符串可能跨多行显示,也可能全部显示在同一行上。
样式参数时可选的。当省略时,文本将使用最接近的DefaultTextStyle中的样式。如果给定样式的TextStyle.inherit属性为true(默认),则给定样式将于最接近的DefaultTextStyle的样式合并。这种合并行为是很有用的,例如,使用默认字体系列和大小时使文本粗体显示。

//Text构造函数
        body: Center(
          child: Text(
            'Hello, $name! How are you?',
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
//Text.rich构造函数
        body: Center(
          child: const Text.rich(
            TextSpan(
              text: 'Hello',
              children: <TextSpan>[
                TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
                TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold))
              ]
            )
          )
        ),

交互:

  • 若使用文本对触摸事件作出反应,请将其包装在GestureDetector组件中,并使用GestureDetector.onTap处理。
  • material design应用程序中,考虑使用FlatButton代替,或者如果不适用,至少使用InkWell来代替GestureDetector
  • 若使用部分文本做交互,需要使用RichText,并将TapeReservator指定为文本相关部分的TextSpan.recognizer
    • RichText:提供了对文本样式的更多控制;
    • DefaultTextStyle:为文本组件提供默认样式。

继承:

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text

构造函数:

//Text构造函数
  const Text(String data, {//要显示的文本
    Key key,
    TextStyle style,//文本样式
    StrutStyle strutStyle,//支撑样式
    TextAlign textAlign,//文本水平对齐方式
    TextDirection textDirection,//文本显示的方向
    Locale locale,//用于在相同Unicode字符可以根据区域设置不同时选择字体
    bool softWrap,//文本是否应该在换行符处断行
    TextOverflow overflow,//处理溢出
    double textScaleFactor,//每个逻辑像素的字体像素值
    int maxLines,//文本可显示多少行
    String semanticsLabel,//该文本的另一种语义标签
  })
//Text.rich构造函数
  const Text.rich(TextSpan textSpan, {//以`TextSpan`方式显示文本
    Key key,
    TextStyle style,
    StrutStyle strutStyle,
    TextAlign textAlign,
    TextDirection textDirection,
    Locale locale,
    bool softWrap,
    TextOverflow overflow,
    double textScaleFactor,
    int maxLines,
    String semanticsLabel,
  })

属性:

名称类型说明
dataString要显示的文本
localeLocale用于在相同Unicode字符可以根据区域设置不同时选择字体
maxLinesint文本可显示多少行。如果文本超过给定的行数,则根据溢出截断。
overflowTextOverflow处理溢出
semanticsLabelString该文本的另一种语义标签
softWrapbool文本是否应该在换行符处断行
strutStyleStrutStyle支撑样式。Strut样式定义了设置最小垂直布局指标的支持。
styleTextStyle设置文本样式
textAlignTextAlign文本水平对齐方式
textDirectionTextDirection文本显示的方向
textScaleFactordouble每个逻辑像素的字体像素值
textSpanTextSpanTextSpan方式显示文本
hashCodeint哈希码
runtimeTypeType对象运行时类型的表示形式

方法:

方法名类型说明
build(BuildContext context)Widget组件表示的部分用户界面
debugFillProperties(DiagnosticPropertiesBulider properties)void添加与节点关联的其他属性
createElementStatelessElement创建一个StatelessElement来管理组件在树中的位置
debugDescribeChildren()List<DiagnosticsNode>返回描述词节点子节点的diagnostics节点对象列表
noSuchMethod(Invocation invocation)dynamic当访问不存在的方法或属性时调用
toDiagnosticsNode({String name, DiagnosticsTreeStyle style})DiagnosticsNode返回由使用调试工具和DiagnostisNode.toStringDep的对象的调试表示形式
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug})String返回此对象的字符串表示形式
toStringDeep({String prefixLineOne:'', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug})String返回子节点和它的子节点的字符串表示形式
toStringShallow({Sting joiner:',', DiagnosticLevel minLevel:DiagnosticLevel.debug})String返回对象的一行详细说明
toStringShort()String对组件简短的文本描述

示例:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    const data = "Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep";
    return MaterialApp(
      title: 'Hello World!',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Fultter'),
        ),
        body: Center(
          child: Text(
            data,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: true,
            strutStyle: StrutStyle(),
            style: TextStyle(
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.bold,
                fontSize: 15.0
            ),
            textAlign: TextAlign.justify,
            textDirection: TextDirection.rtl,
            textScaleFactor: 2.0,
          ),
        ),
      ),
    );
  }
}

参考文档:Text class

    原文作者:ohayoi
    原文地址: https://www.jianshu.com/p/bc209508382e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞