Flutter Text组件

发布于 3 个月前 作者 phonegap100 70 次浏览 来自 分享

Flutter Text组件是Flutter最基本的组件,Text里面可以放文本,通过Text组件里面的参数可以配置文本的样式,Flutter中的Text组件功能和html中的span标签的功能有点相似。

Text组件属性名称 Text组件属性功能
textAlign 文本对齐方式(center居中,left左对齐,right右对齐,justfy两端对齐)
textDirection 文本方向(ltr从左至右,rtl从右至左)
overflow 文字超出屏幕之后的处理方式(clip裁剪,fade渐隐,ellipsis省略号)
textScaleFactor 字体显示倍率
maxLines 文字显示最大行数
style 字体的样式设置

下面是 TextStyle 的参数 :

名称 功能
decoration 文字装饰线(none没有线,lineThrough删除线,overline上划线,underline下划线)
decorationColor 文字装饰线颜色
decorationStyle 文字装饰线风格([dashed,dotted]虚线,double两根线,solid一根实线,wavy波浪线)
wordSpacing 单词间隙(如果是负值,会让单词变得更紧凑
letterSpacing 字母间隙(如果是负值,会让字母变得更紧凑)
fontStyle 文字样式(italic斜体,normal正常体)
fontSize 文字大小
color 文字颜色
fontWeight 字体粗细(bold粗体,normal正常体)

更多参数:https://docs.flutter.io/flutter/painting/TextStyle-class.html

二、Flutter Text组件的使用demo

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        body:HomeContent() 
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
          child: Container(
              child: Text(
                '各位同学大家好我是主讲老师大地,各位同学大家好我是主讲老师大地',
                textAlign:TextAlign.left,
                overflow:TextOverflow.ellipsis ,
                // overflow:TextOverflow.fade ,
                maxLines: 2,
                textScaleFactor: 1.8,
                style:TextStyle(
                  fontSize: 16.0,
                  color:Colors.red,
                  // color:Color.fromARGB(a, r, g, b)
                  fontWeight: FontWeight.w800,
                  fontStyle: FontStyle.italic,
                  decoration:TextDecoration.lineThrough,
                  decorationColor:Colors.white,
                  decorationStyle: TextDecorationStyle.dashed,
                  letterSpacing: 5.0

                )
              
              ),
              height: 300.0,
              width: 300.0,             
              margin: EdgeInsets.fromLTRB(10, 30, 5, 0),

              alignment: Alignment.bottomLeft,

          ),
    );
  }
  
}
回到顶部