Text Widgets for Flutter controls

A control responsible for displaying text and defining display styles.

  • Text

    Display a single style of text

    new Text(
     'Hello, $_name! How are you?',
     textAlign: TextAlign.center,
     overflow: TextOverflow.ellipsis,
     style: new TextStyle(fontWeight: FontWeight.bold),
    )

    If you want the text control to respond to touch events, you should use the control in the GestureDetector control. If it is a material design application, you can consider using FlatButton directly to implement touchable text.

  • RichText

    Display richly styled text

    new RichText(
     text: new TextSpan(
       text: 'Hello ',
       style: DefaultTextStyle.of(context).style,
       children: <TextSpan>[
         new TextSpan(text: 'bold', style: new TextStyle(fontWeight: FontWeight.bold)),
         new TextSpan(text: ' world!'),
       ],
     ),
    )
  • DefaultTextStyle

    Default text style

    Widget build(BuildContext context) {
       return new Container(
         color: Colors.white,
         child: new Directionality(
           textDirection: TextDirection.ltr,
           child: new DefaultTextStyle(
             style: new TextStyle(
               fontSize: 14.0,
               color: Colors.blue,
               decoration: TextDecoration.underline
             ),
             maxLines: 2,
             softWrap: true,
             overflow: TextOverflow.ellipsis,
             child: new Text('+++++++++++++++++++++++++++++++++++我是一段超长的文本++++++++++++++++++++++++++++++++++++++++++++')
           )
         )
       );
     }
  • Directionality

    Mainly controls the text direction

    Widget build(BuildContext context) {
       return new Container(
         color: Colors.white,
         child: new Directionality(
           textDirection: TextDirection.rtl,
           child: new Text('我是一段文本')
         )
       );
     }

The Text control itself has attributes such as style and textDirection. The reason why the DefaultTextStyle control is independent to manage styles and the Directionality control to manage the text direction is to facilitate the unification of the style of a certain module and inherit the properties of the parent control without requiring each element to go to the Set it up again.

DefaultTextStyle and Directionality are subclasses of InheritedWidget. InheritedWidget implements a publish/subscribe mode. When the child control calls the inheritFromWidgetOfExactType method to obtain the parent control, it also adds itself to the subscriber list of InheritedWidget, so when the InheritedWidget property changes , the subcomponent didChangeDependencies method will be called to notify the subcomponent.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325768465&siteId=291194637