flutter text组件使用示例详解

flutter组件的实现参考了react的设计理念，界面上所有的内容都是由组件构成，同时也有状态组件和无状态组件之分，这里简单介绍最基本的组件。

在组件代码的书写方式上，web端开发的样式主要有由css进行控制，而客户端开发根据使用的技术栈不同，写法也稍微有些不同：ReactNative的写法和web比较类似，但是ReactNative是使用StyleSheet.create()方法创建样式对象，以内联的方式进行书写。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const LotsOfStyles = () => {
   return (
     <View style={styles.container}>
       <Text style={styles.red}>just red</Text>
       <Text style={styles.bigBlue}>just bigBlue</Text>
       <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
       <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
     </View>
   );
};
const styles = StyleSheet.create({
 container: {
   marginTop: 50,
 },
 bigBlue: {
   color: 'blue',
   fontWeight: 'bold',
   fontSize: 30,
 },
 red: {
   color: 'red',
 },
});
export default LotsOfStyles;

而flutter则将组件封装成一个个的对象，样式及事件以属性的方式在实例化时进行赋值。

Text( 'Hello, $_name! How are you?',
   textAlign: TextAlign.center,
   overflow: TextOverflow.ellipsis,
   style: const TextStyle(fontWeight: FontWeight.bold),
   )

Text组件

用我们的小拇指头就可以想到，Text组件主要是用来展示一个文本字符串。这字符串根据布局容器的约束空间有可能占展示一行文本，也有可能展示多行文本。

Text组件的构造器有一个可选的style属性，如果我们省略掉这个属性，那么文本就会使用默认的样式。

如果我们指定了我们定制的style样式，这个样式的类对象是TextStyle。我们定制的style样式会被merge到最近的默认样式DefaultTextStyle上去。

默认样式类DefaultTextStyle有这么几个属性：

maxLine: 最大行数，这个属性是可选的。

overflow: 文本超出后的样式。 overflow 的可选值有这么几个：clip（剪切）、fade(隐藏)、ellipsis（省略）、visible(直接展示)。如果我们点开文档看一下，会发现它其实是个枚举类型Enum。

const TextOverflow = {
   clip,
   fade,
   ellipsis,
   visible
}

Text组件构造器上的主要属性

• style： 文本样式。

• textAlign: 文本对齐方式。

• textDirection: 文本方向。

• textHeightBehavior: 定义如何展示style中的height

• selectionColor: 文本选中时的颜色。

• overflow: 文本超出后的样式。

• maxLine: 最大行数，这个属性是可选的。

再用小拇指想一想，对齐方式和文本方向不用说也是个枚举类型。而style则是一个TextStyle的类型,TextStyle可以定义字体的：

• 粗细fontWeight

const Text( 'No, we need bold strokes. ',
       style: TextStyle(fontWeight: FontWeight.bold),
   )

• 斜体FontStyle.italic

const Text( "Welcome to the present",
   style: TextStyle(fontStyle: FontStyle.italic),
)

• 透明度和颜色

TextSpan(
   text: "You don't have the votes.\n",
   style: TextStyle(
       color: Colors.black.withOpacity(0.6)),
   ),

• 字体大小

Text(
   "These are wise words, ",
   style:DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0),
)

• 行高

const Text(
   'Ladies and gentlemen, ',
   style: TextStyle(height: 5, fontSize: 10),
  )

需要注意的是：行高会按照 fontSize * n的比例进行扩展。

然后我们还可以定义字体的下划线、描边、填充颜色、甚至渐变色。

• 下划线

RichText(
   text: const TextSpan(
       text: "Don't tax the South ",
       children: <TextSpan>[
       TextSpan(
       text: 'cuz',
       style: TextStyle(
           color: Colors.black,
           decoration: TextDecoration.underline,
           decorationColor: Colors.red,                    decorationStyle:TextDecorationStyle.wavy,
           ),
        ),
           TextSpan(
           text: ' we got it made in the shade',             ),
     ],
    ),
  )

• 描边和填充颜色

Stack(
   children: <Widget>[
   Text( 'Greetings, planet!',
       style: TextStyle(
           fontSize: 40,
           foreground: Paint()
           ..style = PaintingStyle.stroke
           ..strokeWidth = 6
           ..color = Colors.blue[700]!,
           ),
       ),
   Text( 'Greetings, planet!',
       style: TextStyle(
           fontSize: 40,
           color: Colors.grey[300],
           ),
          ),
         ],
       )

• 颜色渐变

Text(
   'Greetings, planet!',
    style: TextStyle(
        fontSize: 40,
        foreground: Paint()
        ..shader = ui.Gradient.linear(
            const Offset(0, 20),
            const Offset(150, 20),
            <Color>[
            Colors.red,
            Colors.yellow,
            ],
           )
         ),
     )

整体上想要掌握Text组件的属性，需要仔细思考一下它大概需要哪些样式：选用哪种字体，设置什么颜色，需要多少行高，选用哪种对齐方式，是否需要描边和渐变，是否需要一种装饰样式（下划线，删除线）就可以掌握了。

而想要文本有可交互的效果，则需要用GestureDetector这个组件将它包裹起来，在GestureDetector组件上触发ontaps事件。

掌握了这些内容，就算是掌握了flutter的text组件。

来源：https://juejin.cn/post/7171850429838884894