美文网首页
Flutter基础控件之Text

Flutter基础控件之Text

作者: 青年别来无恙 | 来源:发表于2020-02-01 18:02 被阅读0次

    Text定义

    Text是flutter中用来显示文字的小部件。

    class Text extends StatelessWidget {
      /// Creates a text widget.
      ///
      /// If the [style] argument is null, the text will use the style from the
      /// closest enclosing [DefaultTextStyle].
      ///
      /// The [data] parameter must not be null.
      const Text(
        this.data, {
        Key key,
        this.style,
        this.strutStyle,
        this.textAlign,
        this.textDirection,
        this.locale,
        this.softWrap,
        this.overflow,
        this.textScaleFactor,
        this.maxLines,
        this.semanticsLabel,
        this.textWidthBasis,
      }) : assert(
             data != null,
             'A non-null String must be provided to a Text widget.',
           ),
           textSpan = null,
           super(key: key);
    

    Text的类型是StatelessWidget。
    构造方法中,包含了Text小部件的各种属性,其中data是要显示的文字,是必须要实现的,后面{}中的参数是非必须实现的。

    Text的具体用法

    class TextDemo extends StatelessWidget {
      // 可以用一个内部变量进行设置Text的style
      final TextStyle _textStyle = TextStyle(
        fontSize: 16.0,
      );
    
      final String _author = '李白';
      final String _title = '将进酒';
    
      @override
      Widget build(BuildContext context) {
        return Text(
          '《$_title》-- $_author,君不见黄河之水天上来,奔流到海不复回。君不见高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月,天生我材必有用,千金散尽还复来。', // $用来插入变量的值
          textAlign: TextAlign.left, // 对齐方式
          style: _textStyle, // 用变量来设置style
          maxLines: 2, // 限制行数
          overflow: TextOverflow.ellipsis, // 溢出的样式
        );
      }
    }
    

    富文本RichText用法

    class RichTextDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return RichText(
          text: TextSpan(
            text: '君不见黄河之水天上来,',
            style: TextStyle(
              fontStyle: FontStyle.normal,
              fontSize: 30.0,
              color: Colors.red,
            ),
            children: [
              TextSpan(
                text: '奔流到海不复回。',
                style: TextStyle(
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        );
      }
    }
    
    

    效果图

    Text RichText

    相关文章

      网友评论

          本文标题:Flutter基础控件之Text

          本文链接:https://www.haomeiwen.com/subject/ibexxhtx.html