flutter之Text组件

最新推荐文章于 2025-03-11 09:00:00 发布

shen清晨

最新推荐文章于 2025-03-11 09:00:00 发布

阅读量198

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/shenshulong/article/details/103563572

版权

Flutter 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析Flutter中的文本组件使用方法，包括Text与TextSpan组件的属性设置，如文本对齐、行数限制、溢出处理、字体样式调整等，以及如何通过TextSpan实现不同样式文本的组合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码：

new Text(
    //文本
    'hello world',
    //文本对齐方式
	textAlign: TextAlign.center,
	//文本最多显示几行 maxLines:1,
	maxLines:1,
	//超出隐藏的样式(文字超出部分怎么处理)
	// overflow: TextOverflow.clip        直接切掉
	// overflow: TextOverflow.ellipsis  末尾多。。。
	// overflow: TextOverflow.fade      文字从上到下渐变消失
	overflow: TextOverflow.fade,
	//字体显示倍率
	textScaleFactor: 1,
	//文本其他样式
	style: TextStyle(
		fontSize:12,
		#行高
		height: 1.2,
		#字体 
	    fontFamily: "Courier",
	    #背景色
	    background: new Paint()..color=Col
		#字体颜色
		color: Color.fromARGB(255,255,100,100),
		decoration: TextDecoration.underline, //文字加横线
		decorationStyle: TextDecorationStyle.solid) //文字加横线的样式
		//文字间距调整
		letterSpacing: 4, 
	),
)

TextSpan组件：
text的所有文本内容只能按同一种样式，如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer,
       children: <TextSpan> [
            TextSpan(text: "Lorem "),
            TextSpan(
              text: "ipsum",
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48,
              ),
            ),
        ],
     ),
    ]
))