P06. Flutter Text Widget 文本组件的使用

在开始学习Text组件前,我们再来复习一遍最基本的代码编写,肯定有些小伙伴已经忘记了。我们来快速写一个HelloWorld程序出来。

看一下最基础的HelloWold代码。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
            child:Text('Hello Mybj')
          ),
        ),
      );
  }
}

这里我们已经使用了一个最简单的Text组件了,但是我们所有属性都是默认的的,下面我们就来多一点修饰这个Text组件。

TextAlign属性

TextAlign属性就是文本的对齐方式,它的属性值有如下几个(详细请看视频中讲解):

  • center: 文本以居中形式对齐,这个也算比较常用的了。
  • left:左对齐,经常使用,让文本居左进行对齐,效果和start一样。
  • right:右对齐,使用频率也不算高。
  • start:以开始位置进行对齐,类似于左对齐。
  • end: 以为本结尾处进行对齐,不常用。有点类似右对齐.

总结起来,也就算三个对齐方式,left(左对齐)、center(居中对齐)、right(右对齐)。我们来看一下具体代码:

child:Text(
  '码云笔记是一个关注web前端开发的独立个人技术博客',
  textAlign:TextAlign.left,
)

maxLines属性

设置最多显示的行数,比如我们现在只显示1行,类似一个新闻列表的题目。代码如下:

child:Text(
  '码云笔记是一个关注web前端开发的独立个人技术博客',
  textAlign:TextAlign.left,
  maxLines: 1,
)

设置好后,文字只能显示出1行了。

overflow属性

overflow属性是用来设置文本溢出时,如何处理,它有下面几个常用的值供我们选择。

  • clip:直接切断,剩下的文字就没有了,感觉不太友好,体验性不好。
  • ellipsis:在后边显示省略号,体验性较好,这个在工作中经常使用。
  • fade: 溢出的部分会进行一个渐变消失的效果,当然是上线的渐变,不是左右的哦。

style属性

style属性的内容比较多,具体的你可以查一下API,我这里带作一个效果,方便大家快速学会Style的用法。

我们下面要作的效果为,字体大小为25.0,颜色为粉红色,并且有一个下划线。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
            child: Text(
          '码云笔记是一个关注web前端开发的独立个人技术博客',
          textAlign: TextAlign.left,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 150, 150),
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.solid,
          ),
        )),
      ),
    );
  }
}

效果如下:

Flutter Text Widget 文本组件的使用

更详细的属性资料可以参看这个网址:TextStyle-class

其实程序员最重要的一个能力就是查看文档的能力,我这里也只是讲些最常使用的,在实际工作中,还是要多查文档。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P06. Flutter Text Widget 文本组件的使用

发表评论

提供最优质的资源集合

立即查看 了解详情