Flutter:文本组件Text和RichText

xiaohai 2021-08-12 07:49:06 248人围观 标签: Flutter 
简介Text其实主要是显示文本信息的,并且我们可以对这个文本做一些相应的修饰,就好比我们word中调整文字的样式一样,如字体大小、文字加粗、倾斜、下划线、删除线、对齐方式等,下面我们将通过例子来使用Text这个组件。

  本节我们将学习第一个组件-Text,从名字上一看,我们就知道这是处理文本的一个组件。读者如果学习过WEB开发或其他APP开发都应该知道Text是干什么用的。

  Text其实主要是显示文本信息的,并且我们可以对这个文本做一些相应的修饰,就好比我们word中调整文字的样式一样,如字体大小、文字加粗、倾斜、下划线、删除线、对齐方式等,下面我们将通过例子来使用Text这个组件。在使用Text之前,我们将用如下的代码作为我们的基础,不懂的暂时我们不去管它,后续将会依依讲解。

import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text('标题'),
        ),
        body: ListView(
          children: <Widget>[
            //我们就在这里面编写相关代码
          ],
        ),
      ),
    );
  }
}

以下每个段的代码都可以放到上面的模板中去执行。

一、Text组件
1、基本使用和常用属性使用
Text('1、正常文字的显示,小于一行的显示'),
Text('2、正常文字的显示,但是如果文字较多,将会折行显示,大家可以看看对不对'),
Text('3、如果我们文字显示最大行数,设置成一行,那么这里将不会折行显示,而是截断',maxLines: 1,),
Text('4、如果我们文字显示最大行数,设置成一行,那么这里将不会折行显示,如果加上overflow并设置成ellipsis,那么末尾将有三个点',maxLines: 1,overflow: TextOverflow.ellipsis,),
Text('5、文字的方向:从左到右',textDirection: TextDirection.ltr,),
Text('6、文字的方向:从右到左',textDirection: TextDirection.rtl,),
Text('7、对其方式:居中',textAlign: TextAlign.center,),
Text('8、对其方式:居左',textAlign: TextAlign.left,),
Text('9、对其方式:居右',textAlign: TextAlign.right,),
Text('10、是否自动换行,默认为true,如果为false,文字就不考虑容器的大小,单行显示,超出部分默认截断处理',softWrap: false,),
Text('11、字体显示倍率',textScaleFactor: 1.5,),
2、style属性使用
Text('12、文字大小控制',style: TextStyle(fontSize: 20.0),),
Text('13、文字颜色控制,预定义颜色',style: TextStyle(fontSize: 20.0,color: Colors.red),),
Text('14、文字颜色控制,RGB方式设置',style: TextStyle(fontSize: 20.0,color: Color.fromARGB(1000, 100, 100, 90)),),
Text('15、文字加粗',style: TextStyle(fontWeight: FontWeight.bold),),
Text('16、文字斜体',style: TextStyle(fontStyle: FontStyle.italic),),
Text('17、文字是否显示,默认true,false不显示',style: TextStyle(inherit: true),),
Text('18、文字间距',style: TextStyle(letterSpacing: 10.0),),
Text('19、word: 字符间距,字和单词之间的距离',style: TextStyle(wordSpacing: 20.0),),
Text('20、基线alphabetic',style: TextStyle(textBaseline: TextBaseline.alphabetic),),
Text('21、基线ideographic',style: TextStyle(textBaseline: TextBaseline.ideographic),),
Text('22、下划线',style: TextStyle(decoration: TextDecoration.underline),),
Text('23、上划线',style: TextStyle(decoration: TextDecoration.overline),),
Text('24、删除线',style: TextStyle(decoration: TextDecoration.lineThrough),),

效果图如下:
图片alt

这里介绍了Text组件的基本属性,还有一些没有详细介绍,后续在使用过程中我们再进行介绍,下面我们将介绍下行内多样式文字组件RichText。

二、二、RichText组件

使用RichText组件是可以控制行内多样式文字,也就是一段文字我们进行拆分成多个不同的样式,每个样式使用TextSpan来进行控制,按照自己想要的样式对每个TextSpan进行设置,并且TextSpan组件包含childred属性,并且是一个数组,里面还可以包含多个TextSpan空间,子组件继承父组件的样式,也可以对子组件进行单独样式处理。下面做了一个简单Demo。

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

class RichTextBaseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RichText组件'),
        elevation: 0.0,
        centerTitle: true,
      ),
      body: ListView(
        children: [
          RichText(
            textAlign: TextAlign.center,
            text: TextSpan(
              text: '登录即同意',
              style: TextStyle(fontSize: 14, color: Colors.black),
              children: [
                TextSpan(
                  text: '"服务条款"',
                  style: TextStyle(fontSize: 14, color: Colors.blue),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print('点击了服务条款');
                    },
                ),
                TextSpan(
                  text: '和',
                  style: TextStyle(fontSize: 14, color: Colors.black),
                ),
                TextSpan(
                  text: '"隐私政策"',
                  style: TextStyle(fontSize: 14, color: Colors.blue),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print('点击了隐私政策1');
                    },
                ),
                WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: Image.asset(
                    'images/icon.jpg',
                    width: 20,
                    height: 20,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这里采用了图文混排的效果,就需要使用WidgetSpan,里面可以用任意的可以接入任何Widget。

图片alt