当前位置：首页 > news >正文

Flutter基本组件Text使用

news 2025/6/28 7:42:59

Text是一个文本显示控件，用于在应用程序界面中显示单行或多行文本内容。

Text简单Demo

import 'package:flutter/material.dart';class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("My TEXT TEST")),extendBody: true,body: Column(children: [const Spacer(),Container(margin: const EdgeInsets.all(10),child: Center(child: Text("text one",style: TextStyle(fontSize: 28,fontStyle: FontStyle.italic,color: Colors.blue,letterSpacing: 2,wordSpacing: 10,fontFamily: 'Roboto'),textAlign: TextAlign.center,softWrap: true,overflow: TextOverflow.ellipsis,),),),const Spacer(),],),);}
}

重要属性

data

Text的默认构造函数中有一个必传的参数，且必须作为第一个传入的参数，类型是String，就是Text显示的文本。

 const Text(String this.data, {super.key,this.style,this.strutStyle,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,@Deprecated('Use textScaler instead. ''Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. ''This feature was deprecated after v3.12.0-2.0.pre.',)this.textScaleFactor,this.textScaler,this.maxLines,this.semanticsLabel,this.textWidthBasis,this.textHeightBehavior,this.selectionColor,})

style

Text默认样式是DefaultTextStyle类型。如果需要修改样式，可以通过style参数传入一个TextStyle类型的值。

 @overrideWidget build(BuildContext context) { ...final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);...
}

      style: TextStyle(fontSize: 28,fontStyle: FontStyle.italic,color: Colors.blue,letterSpacing: 2,wordSpacing: 10,fontFamily: 'Roboto'),

设置文本颜色

TextStyle(color: Colors.blue)

设置文本背景颜色

style:TextStyle(backgroundColor: Colors.green)

设置文本字体大小

style: TextStyle(fontSize: 100)

设置文本加粗

style: TextStyle(fontWeight: FontWeight.bold)

设置文本为斜体

 style: TextStyle(fontStyle: FontStyle.italic)

设置文本之间的间隙

   style: TextStyle(letterSpacing: 10,)

设置文本内单词间距

 style: TextStyle(wordSpacing: 100)

设置文本行高

  style: TextStyle(height: 10,)

设置文本阴影

style: TextStyle(shadows: [Shadow(color: Colors.black, offset: Offset(3, 2))])

设置文本内容删除线

   style: TextStyle(decoration: TextDecoration.lineThrough, decorationColor: Colors.yellow,)

设置文本内容下划线

       style: TextStyle(decoration: TextDecoration.underline, decorationColor: Colors.yellow,)

设置文本对齐方式

 textAlign: TextAlign.center

居中

设置文本换行

softWrap:true换行；false不换行；

import 'package:flutter/material.dart';class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("My TEXT TEST")),extendBody: true,body: Column(children: [const Spacer(),Container(margin: const EdgeInsets.all(10),child: Center(child: Text("text one texttexttexttexttexttexttexttexttexttexttexttexttext",style: TextStyle(fontSize: 50,fontStyle: FontStyle.italic,color: Colors.blue,backgroundColor: Colors.green,letterSpacing: 0,wordSpacing: 100,fontWeight: FontWeight.bold,fontFamily: 'Roboto',decoration: TextDecoration.underline, decorationColor: Colors.yellow,shadows: [Shadow(color: Colors.black, offset: Offset(3, 2))]),textAlign: TextAlign.center,maxLines: 3,softWrap: true,overflow: TextOverflow.ellipsis,),),),const Spacer(),],),);}
}

设置文本溢出

overflow: TextOverflow.ellipsis

设置文本显示最大行数

maxLines: 3

指定文本方向

textDirection: TextDirection.rtl

富文本

import 'package:flutter/material.dart';class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("My TEXT TEST")),extendBody: true,body: Column(children: [const Spacer(),Container(margin: const EdgeInsets.all(10),child: Center(// child: Text(//     "text one texttexttexttexttexttexttexttexttexttexttexttexttext",//     style: TextStyle(//         fontSize: 50,//         fontStyle: FontStyle.italic,//         color: Colors.blue,//         backgroundColor: Colors.green,//         letterSpacing: 0,//         wordSpacing: 100,//         fontWeight: FontWeight.bold,//         fontFamily: 'Roboto',//         decoration: TextDecoration.underline,//         decorationColor: Colors.yellow,//         shadows: [//           Shadow(color: Colors.black, offset: Offset(3, 2))//         ]),//     textAlign: TextAlign.center,//     maxLines: 3,//     softWrap: true,//     overflow: TextOverflow.ellipsis,//     textDirection: TextDirection.rtl),child: Text.rich(TextSpan(children: [TextSpan(text: "hhhhhhhhhhhhhhhhhhhhhhhh",style: TextStyle(color: Colors.red,fontSize: 18.0,fontWeight: FontWeight.w700)),TextSpan(text: "ooooooooooooooooooo",style: TextStyle(color: Colors.blue,fontSize: 24.0,fontWeight: FontWeight.w700)),TextSpan(text: "iiiiiiiiiiiiiiiiiiiiiiiiiii",style: TextStyle(decoration: TextDecoration.lineThrough,color: Colors.yellow,fontSize: 14.0)),TextSpan(text: "lllllllllllllllllllllllllll")]))),),const Spacer(),],),);}
}