Flutter入门之Text Widget文本组件

最基本的默认属性

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')
          ),
        ),
      );
  }
}

TextAlign属性

TextAlign属性就是文本的对齐方式

• center: 文本以居中形式对齐。
• left:左对齐，效果和start一样。
• right :右对齐。
• start:以开始位置进行对齐，类似于左对齐。
• end: 以为本结尾处进行对齐，有点类似右对齐.

child:Text(
  'Hello,欢迎学习Flutter，来到Flutter这个大家庭，让我们一起努力吧。',
  textAlign:TextAlign.left,
)

maxLines属性

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

child:Text(
  'Hello,欢迎学习Flutter，来到Flutter这个大家庭，让我们一起努力吧。',
  textAlign:TextAlign.left,
  maxLines: 1,
)

overflow属性

overflow属性是用来设置文本溢出时，如何处理

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

style属性

这里做一个简单的展示，详细见官方文档：https://docs.flutter.io/flutter/painting/TextStyle-class.html

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,欢迎学习Flutter，来到Flutter这个大家庭，让我们一起努力吧。',
  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,
  ),
)
          ),
        ),
      );
  }
}