美文网首页Flutter
01.Text Widget组件

01.Text Widget组件

作者: A君小红红 | 来源:发表于2020-05-31 20:59 被阅读0次
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 JSPang')
          ),
        ),
      );
  }
}

### TextAlign属性

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

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

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

child:Text(
  'Hello JSPang  ,非常喜欢前端,并且愿意为此奋斗一生。我希望可以出1000集免费教程。',
  textAlign:TextAlign.left,
)

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

### overflow属性

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

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

### style属性

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

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

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 JSPang  ,非常喜欢前端,并且愿意为此奋斗一生。我希望可以出1000集免费教程。',
  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,
  ),
)
          ),
        ),
      );
  }
}

相关文章

  • 01.Text Widget组件

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

  • K01-02:Kivy的Widget组件

    基本上Kivy中的UI组件都是继承Widget,掌握好Widget就基本上掌握了UI组件的使用。Widget的设计...

  • 总接 - Flutter Widget、Element和Rend

    1.Flutter一切都是Widget2.Widget组件的配置信息3.Element 组件实例,一个widget...

  • Flutter 之TabBar实现

    Flutter最基础的组件类是Widget,其它所有组件都继承Widget的,紧接着下面有两大类组件: 有状态组件...

  • Flutter之Widget和Element

    一、Widget Flutter是移动UI框架,Widget组件是UI的基础。 它们都是抽象类,继承Widget,...

  • 快速上手Widget设计?这章帮你你搞定!

    一、概念: Widget是什么? Widget就是可以放在桌面上的组件。 Widget特征 身材微 、 形式多 、...

  • Flutter学习笔记20-剪裁

    Flutter中用于对组件进行剪裁的Widget如下表: Widget用途ClipOval子组件为正方形时剪裁为内...

  • Flutter渲染原理

    widget介绍 flutter开发最常用到的对象就是widget,它不仅包含了各种UI组件,还囊括了手势操作组件...

  • Flutter 常用组件

    flutter中所有的东西都是组件(widget),组件又分为动态组件(StatefulWidget)、静态组件(...

  • provider 的使用

    当我们想在多个页面(组件/Widget)之间共享状态(数据),或者一个页面(组 件/Widget)中的多个子组件之...

网友评论

    本文标题:01.Text Widget组件

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