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组件。

作者:前端那些年

%s 个评论

要回复文章请先登录注册