Text-文本组件

Text-文本组件

截屏2021-01-01 上午11.08.35.png

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

/**
 * 文本框 例子
 */
class TextWigetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text("这是普通文本"), // 普通字符串
          Text(
            "测试超出文本，超出部分省略号表示！测试超出文本，超出部分省略号表示！测试超出文本，超出部分省略号表示！测试超出文本，超出部分省略号表示！",
            overflow: TextOverflow.ellipsis, // 文本超出部分显示省略号
          ),
          Text(
            "文本样式",
            textAlign: TextAlign.center, // 文本对齐方式
            style: TextStyle(
                // 文本样式
                fontWeight: FontWeight.bold, // 样式加粗
                color: Colors.red, // 红色字体
                fontSize: 20, // 字体大小
                fontStyle: FontStyle.italic // 斜体
                softWrap: true, // 文本自动换行
                // fontFamily: '',  // 设置字体库
            ), // 文本样式
          ),
        ],
      ),
    );
  }
}

Text("这是普通文本"), // 普通字符串

注意：Text组件一定要包裹在Scaffold组件下（也有其他方式，就自己调整样式）

属性:

style属性：文本的样式在style中设置，类型为TextStyle，TextStyle中包含很多文本样式属性，下面介绍一些常用的。

• fontWeight: FontWeight.bold, // 样式加粗
• color: Colors.red, // 红色字体
• fontSize: 20, // 字体大小
• fontStyle: FontStyle.italic // 斜体
• softWrap: true, // 文本自动换行

textAlign属性：(使用方式TextAlign.left)

• left：左对齐
• right：右对齐
• center：居中
• justify：两端对齐，此属性中文存在bug（Flutter版本：1.17.3）也可以在官方issue中关注此问题
• start：前端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则左对齐，设置TextDirection.rtl则右对齐。
• end：末端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则右对齐，设置TextDirection.rtl则左对齐。

overflow属性：（使用方式TextOverflow.ellipsis）

• clip：直接裁剪。
• fade：越来越透明。
• ellipsis：省略号结尾。
• visible：依然显示，此时将会溢出父组件。