Introduces the Flutter Text control

First, use method

  1. A constructor
  • Set plain 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(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),)Copy the code
  • Set the 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)),
        ],
    )
  )
Copy the code

2. Common attributes

  1. Set style Sets the style of text using TextStyle
TextStyle({
    this.inherit = true// this. FontSize,// fontSize this. FontWeight,// font thickness, This. fontStyle,// fontStyle normal or italic this.letterSpacing,// word-spacing (negative values make letters more compact) This.textbaseline,// Set this.foreground,// Set foreground This background, / / set the background color to this. We, / / set the shadow enclosing decoration, / / set text decoration (none/underline/overline/lineThrough) Enclosing decorationColor, / / set the text decoration color enclosing decorationStyle, / / text decoration style (solid/double/dotted dashed/wavy) enclosing debugLabel, / /? String fontFamily, / /? String package,//? })Copy the code

2, set the font alignment TextAlign

  • Center aligns the text to the center of the container
  • End aligns the text on the container’s trailing edge.
For left-to-right text (textDirection.ltr), this is the right edge. For right-to-left text (textdirection.rtl), this is the left edge.Copy the code

  • Justify stretches the end line of text to fill the width of the container and align the edges.

  • Left Aligns the text on the left edge of the container.

  • Right aligns the text on the right edge of the container.

  • Start aligns 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 correct edge.Copy the code

MaxLines The maximum number of optional lines to span. If the text exceeds a given number of lines, it is truncated based on overflow.

4. TextDirection is used to set the alignment of text

  • Some languages are written from left to right (e.g., English, Tamil or Chinese), while others are written from right to left (e.g., Aramaic, Hebrew or Urdu). Some are also mixed; Arabic, for example, is mostly written right to left, and numbers are written left to right. TextDirection is basically the alignment of text.
  • TextDirection has two enumerations:
Textdirection.trl is going from left to rightCopy the code

Overflow Set the processing method when text overflows the screen

Fade textoverflow. ellipsis(ellipsis)Copy the code

6, set font display ratio

TextScaleFactor: 2.0,// Set the font display ratio to double the original fontCopy the code

A complete example

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),), // Example 3 Set 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 (/ / example 3 set when Text form of alignment'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 breakto 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(// Example 4 set what to do when the Text is off screen, and set the direction of the Text to be written'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(// Example 5 sets whether to wrap'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: trueTextDirection: textDirection. LTR, style: TextStyle(fontSize: 20), overflow: Textoverflow.fade,), Text(// Example 6: Set the font display magnification. You can adjust the Text size by setting the font display magnification'6.Hello flutter text \n',
              textAlign: TextAlign.left,
              softWrap: trueTextDirection: textdirection. RTL, style: TextStyle(fontSize: 20), overflow: Textoverflow.fade, textScaleFactor: 2.0,// Set font display ratio to double the original font),],),); }}Copy the code