第一节 Flutter Text Widget 文本组件的使用

2019-06-27  本文已影响0人  HT_Jonson

text

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';



class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController _textEditingController = new TextEditingController();
  final showText = '1测试数据asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdasdfasdfasdfads11112asdfasdfasdwqe222222222222222222';
   @override
  Widget build(BuildContext context) {
    gethttp();
    return Scaffold(
      appBar: AppBar(
        title: Text('测试'),
      ),
      body: Center(
       
        child: Text(
          showText,
          textAlign: TextAlign.center,
          maxLines: 2,
          style: new TextStyle(

          ),
        ),
      ),
    );
  }

}

①inherit
默认为true,设置为false时候表示不显示
②color
字体颜色
③fontSize
fontSize默认是14.0的
④fontWeight
字体的粗体
⑤fontStyle
normal正常 italic 斜体
⑥letterSpacing
字符间距
⑦wordSpacing
单词间距
⑧textBaseline
alphabetic:用于对齐字母字符底部的水平线
ideographic:用于对齐表意字符的水平线
⑨height
用在Text控件上的时候,会乘以fontSize做为行高,
⑩locale
国际化
⑪foreground
用paint来渲染text,也可以用他来改变字体颜色等
⑫background
⑬decoration
有四种下划线、删除线、上划线,默认是无
⑭decorationStyle
线的样式,源码中有这些样式
⑮fontFamily和package(自定义字体的时候用的到)

TextAlign属性
TextAlign属性就是文本的对齐方式,它的属性值有如下几个:

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

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

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


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

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

image.png
上一篇下一篇

猜你喜欢

热点阅读