Text 组件

桃扇骨 2021-09-13 15:34 306阅读 0赞

一、主要参数说明

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 正常体）

三、代码示例：

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,
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.blue, width: 2.0),
                borderRadius: BorderRadius.all(
                  //  Radius.circular(150),    //圆形
                  Radius.circular(10),
                )),
            // padding:EdgeInsets.all(20),
    
            // padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
    
            margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
    
            // transform:Matrix4.translationValues(100,0,0)
    
            // transform:Matrix4.rotationZ(0.3)
    
            // transform:Matrix4.diagonal3Values(1.2, 1, 1)
    
            alignment: Alignment.bottomLeft,
          ),
        );
      }
    }