Flutter开发-Text Widget(文本)

群组
欢迎加入群组,闲聊工作&技术&问题等

在Flutter中文本的显示可以用Text Widget来实现.Text的初始化方法必须带上一个string类型的参数,Text类中也定义了一些常用的属性.

Text基本属性

/// The text to display.
  ///
  /// This will be null if a [textSpan] is provided instead.
  final String data;

  /// The text to display as a [InlineSpan].
  ///
  /// This will be null if [data] is provided instead.
  final InlineSpan textSpan;

  /// If non-null, the style to use for this text.
  ///
  /// If the style's "inherit" property is true, the style will be merged with
  /// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
  /// replace the closest enclosing [DefaultTextStyle].
  final TextStyle style;

  /// {@macro flutter.painting.textPainter.strutStyle}
  final StrutStyle strutStyle;

  /// How the text should be aligned horizontally.
  final TextAlign textAlign;

  /// The directionality of the text.
  ///
  /// This decides how [textAlign] values like [TextAlign.start] and
  /// [TextAlign.end] are interpreted.
  ///
  /// This is also used to disambiguate how to render bidirectional text. For
  /// example, if the [data] is an English phrase followed by a Hebrew phrase,
  /// in a [TextDirection.ltr] context the English phrase will be on the left
  /// and the Hebrew phrase to its right, while in a [TextDirection.rtl]
  /// context, the English phrase will be on the right and the Hebrew phrase on
  /// its left.
  ///
  /// Defaults to the ambient [Directionality], if any.
  final TextDirection textDirection;

  /// Used to select a font when the same Unicode character can
  /// be rendered differently, depending on the locale.
  ///
  /// It's rarely necessary to set this property. By default its value
  /// is inherited from the enclosing app with `Localizations.localeOf(context)`.
  ///
  /// See [RenderParagraph.locale] for more information.
  final Locale locale;

  /// Whether the text should break at soft line breaks.
  ///
  /// If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
  final bool softWrap;

  /// How visual overflow should be handled.
  final TextOverflow overflow;

  /// The number of font pixels for each logical pixel.
  ///
  /// For example, if the text scale factor is 1.5, text will be 50% larger than
  /// the specified font size.
  ///
  /// The value given to the constructor as textScaleFactor. If null, will
  /// use the [MediaQueryData.textScaleFactor] obtained from the ambient
  /// [MediaQuery], or 1.0 if there is no [MediaQuery] in scope.
  final double textScaleFactor;

  /// An optional maximum number of lines for the text to span, wrapping if necessary.
  /// If the text exceeds the given number of lines, it will be truncated according
  /// to [overflow].
  ///
  /// If this is 1, text will not wrap. Otherwise, text will be wrapped at the
  /// edge of the box.
  ///
  /// If this is null, but there is an ambient [DefaultTextStyle] that specifies
  /// an explicit number for its [DefaultTextStyle.maxLines], then the
  /// [DefaultTextStyle] value will take precedence. You can use a [RichText]
  /// widget directly to entirely override the [DefaultTextStyle].
  final int maxLines;

  /// An alternative semantics label for this text.
  ///
  /// If present, the semantics of this widget will contain this value instead
  /// of the actual text. This will overwrite any of the semantics labels applied
  /// directly to the [TextSpan]s.
  ///
  /// This is useful for replacing abbreviations or shorthands with the full
  /// text value:
  ///
  /// Text(r'$$', semanticsLabel: 'Double dollars')
  final String semanticsLabel;

  /// {@macro flutter.dart:ui.text.TextWidthBasis}
  final TextWidthBasis textWidthBasis;

TextStyle属性

设置字体颜色,大小一些属性封装在TextStyle类中了:

/// Creates a text style.
  ///
  /// The `package` argument must be non-null if the font family is defined in a
  /// package. It is combined with the `fontFamily` argument to set the
  /// [fontFamily] property.
  const 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,
    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基本使用

常用的一些Text方法:

Text("Hello World, flutter is coming" * 4,
              textAlign: TextAlign.center,//文本对齐方式
              maxLines: 10,//最大行数
              textScaleFactor: 1.5,//字体大小缩放倍数
              overflow: TextOverflow.ellipsis,//长度超过屏幕,显示方式
              style: TextStyle(
                color: Colors.black,//颜色
                fontSize: 18.0,//字体大小
                height: 1.5,//字体高度
                // fontFamily: 字体
                backgroundColor: Colors.orange,//背景颜色
                decoration: TextDecoration.underline,//装饰 下划线
                decorationColor: Colors.green,//下划线颜色
                decorationStyle: TextDecorationStyle.double,//下划线样式
              ),
            ),

Text富文本

Text的富文本主要通过TextSpan来实现:

Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                    text: "Hello",
                    style: TextStyle(
                      color:Colors.purple,
                      fontSize: 25.0,
                      height: 2,
                     ),
                  ),
                  TextSpan(
                    text: "I am .",
                    style: TextStyle(
                      height: 1.5,
                      color: Colors.green,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  TextSpan(
                    text: "Flutter",
                    style: TextStyle(
                      color: _toggle ? Colors.lime : Colors.pink,
                      decoration: TextDecoration.underline,
                      fontSize: 30.0,
                      height: 2.5,
                    ),
                    recognizer: _tapGestureRecognizer
                      ..onTap = (){
                        setState(() {
                          _toggle = !_toggle;
                        });
                      }
                  ),
                ]
              ),
            ),

text example

Demo

demo地址


 上一篇
Flutter开发-Button Widget(按钮) Flutter开发-Button Widget(按钮)
群组欢迎加入群组,闲聊工作&技术&问题等         Material widget标准库中为我们提供了多种式样的Button Widge
2019-06-17
下一篇 
Flutter开发-加载本地资源(图片) Flutter开发-加载本地资源(图片)
群组欢迎加入群组,闲聊工作&技术&问题等 Assests        Flutter加载本地资源文件需要将本地资源放入assets中,ass
2019-06-13
  目录