🤩🤩

前言
Text顾名思义Text就是用来展示文本的,相当于iOS中的UILabel控件，几乎在每个App的UI中或多或少都会有。

目录
一、简单Text使用
二、参数说明 TextStyle style
三、富文本的显示
四、文本点击事件

文本作为UI最基本的元素，最基本的用法有这些：

• 字体大小、颜色、是否加粗、下划线、删除线（常用）
• 文字的显示形式（单行，最多显示几行、超出边界之后如何显示）
• 富文本的显示
• 文本点击事件

  const Text(
  this.data, { //内容
  Key key,
  this.style, // 样式
  this.strutStyle, // 使用的支柱风格
  this.textAlign, // 对齐方式
  this.textDirection, // 文本方向
  this.locale, //用于选择区域特定字形的语言环境
  this.softWrap, // 是否允许换行显示,默认为true
  this.overflow, // 超出屏幕显示方式 clip：超出裁剪 ellipsis：超出部分显示省略号
  this.textScaleFactor, // 每个逻辑像素的字体像素数，
  this.maxLines, // 最大行数
  this.semanticsLabel, // 文本的另一个语义标签
  this.textWidthBasis,
  })

注：其中style样式常用 里面可以设置字体大小，颜色等等

一、简单Text使用

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column( 
        children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 100)),          
            Text('差打打；大乱斗；思考；大叔大婶多多；打卡；单身快乐；山东快书；打瞌睡；的抗衰老；的抗衰老；打瞌睡；打卡；思考；SDK；',
                    maxLines: 2, //最多显示2行
                    overflow: TextOverflow.ellipsis, //超出部分 显示...
                    style: TextStyle(
                      color: const Color(0xff333333),
                      fontSize: 20,
                      decoration: TextDecoration.none, //线条在中间
          )
         ),
         //网络图片显示
         Image.network("https://upload-images.jianshu.io/upload_images/1658521-12a465c8068bfcbb.jpg?imageMogr2/auto-orient/strip|imageView2/2")
        ],
      ),
    );
  }
}

图片.png

二、参数说明 TextStyle style

三、富文本的显示

import 'package:flutter/material.dart';
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: RichText(
      text: TextSpan(
          text: 'hello flutter',
          style: TextStyle(
            color: Colors.red,
            fontSize: 40,
            fontWeight: FontWeight.w100,
          ),
          children: [
            TextSpan(
              text: '你好 跨平台',
              style: TextStyle(
                fontSize: 20,
                color: Colors.black,
              ),
            ),
          ]),
    ));
  }
}

图片.png

四、 文本点击事件

可以使用GestureDetector

      return GestureDetector(
           child: Text(
              "點點",
            ),
      onTap: () {
        print("點點我");
      },
         );

也可以使用InkWell：

InkWell(
            child: Text(
              "Default Text",
            ),
            onTap: (){debugPrint("click");},
          )