Flutter入门之旅二（Text组件）

前言
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: [
            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

属性	说明
Color color	文本颜色。注:如果指定了foreground，则此值必须为null。
TextDecoration decoration	绘制文本装饰: 下划线（TextDecoration.underline） 上划线（TextDecoration.overline） 删除线（TextDecoration.lineThrough） 无（TextDecoration.none）
Color decorationColor	绘制文本装饰的颜色
TextDecorationStyle decorationStyle	绘制文本装饰的样式: 画一条虚线 TextDecorationStyle.dashed 画一条虚线TextDecorationStyle.dotted 画两条线 TextDecorationStyle.double 画一条实线 TextDecorationStyle.solid 画一条波浪线TextDecorationStyle.wavy
FontWeight fontWeight	绘制文本时使用的字体粗细： FontWeight.bold 即w700 FontWeight.normal 即w400 FontWeight.w900 值越大就越粗
FontStyle fontStyle	字体变体： FontStyle.italic 使用斜体 FontStyle.normal 使用直立
TextBaseline textBaseline	对齐文本的水平线: TextBaseline.alphabetic：文本基线是标准的字母基线 TextBaseline.ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
double fontSize	字体大小(pt、sp),默认为14个逻辑像素(14pt、14sp)
double letterSpacing	水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
double wordSpacing	单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。
double height	文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
Paint background	文本背景色
Paint foreground	文本的前景色，不能与color共同设置

三、富文本的显示

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");},
          )