Flutter显示文本控件小结
在Flutter中,有多种控件可用于显示文本。本文对这些控件进行了整理,并提供了一些简单的使用示例。
Text
这是Flutter中最基本和最常用的文本显示控件。它适用于显示简单、静态的文本。
属性解析:
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,
})
- data(String):显示的文本内容
- key:控制框架如何使用该小部件的唯一标志符。通常用于在构建过程中保持状态。很少用于简单的文本显示,但在复杂的应用中非常有用。
- stype:文本样式。它是一个TextStyle类型,可以设置字体、颜色、粗细等属性。
- strutStyle: 用于定义段落内文本的布局策略,类型为 StrutStyle。它可以影响行高和首尾对齐等。
- textAlign: 文本对齐方式,类型为 TextAlign,例如 TextAlign.left, TextAlign.center, TextAlign.right 等。
- textDirection: 文本方向,类型为 TextDirection,例如 TextDirection.ltr(从左到右)和 TextDirection.rtl(从右到左)。
- locale: 用于指定语言环境,类型为 Locale。在国际化应用中常用。
- softWrap: 一个布尔值,用于指示文本是否在软换行处换行。如果为 false,文本将不会换行并可能溢出。
- overflow: 文本溢出时的处理方式,类型为 TextOverflow,例如 TextOverflow.clip, TextOverflow.ellipsis 等。
- textScaleFactor: 已弃用。用于控制文本缩放因子,但建议使用 textScaler 替代它。
- textScaler: 用于替代 textScaleFactor 的新属性,未来版本将支持非线性文本缩放。
- maxLines: 设置显示文本的最大行数。如果超过这个数字,超出的部分会被截断或隐藏。
- semanticsLabel: 语义标签,用于屏幕阅读器,以帮助有视力障碍的用户理解文本内容。
- textWidthBasis: 控制文本宽度计算的基准,类型为 TextWidthBasis,例如 TextWidthBasis.parent 和 TextWidthBasis.longestLine。
- textHeightBehavior: 控制文本高度相关的行为,类型为 TextHeightBehavior,可以用来调整行间距等。
- selectionColor: 文本选中的背景颜色。
示例:
class TextPage extends StatelessWidget {
const TextPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Text Widget Example')),
body: Center(
child: Text(
'Hello, Flutter!',
key: Key('exampleText'),
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
letterSpacing: 2.0,
),
strutStyle: StrutStyle(
fontSize: 24,
height: 1.5,
),
textAlign: TextAlign.center,
textDirection: TextDirection.ltr,
locale: Locale('en', 'US'),
softWrap: true,
overflow: TextOverflow.ellipsis,
textScaleFactor:
1.2, // Note: It's deprecated, use textScaler in future versions
maxLines: 2,
semanticsLabel: 'Greeting text for accessibility',
textWidthBasis: TextWidthBasis.longestLine,
textHeightBehavior: TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: true,
),
selectionColor: Colors.yellow,
),
),
),
);
}
}
RichText
用于显示带有丰富样式的文本,可以在同一段文本中应用不同的样式。通常与TextSpan一起使用。
属性解析:
RichText({
super.key,
required this.text,
this.textAlign = TextAlign.start,
this.textDirection,
this.softWrap = true,
this.overflow = TextOverflow.clip,
@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.',
)
double textScaleFactor = 1.0,
TextScaler textScaler = TextScaler.noScaling,
this.maxLines,
this.locale,
this.strutStyle,
this.textWidthBasis = TextWidthBasis.parent,
this.textHeightBehavior,
this.selectionRegistrar,
this.selectionColor,
})
- text: 使用 TextSpan 和 children 来定义不同样式的文本片段。
- 第一个 TextSpan: 普通文本 "Hello, ",字体大小为 24,颜色为黑色。
- 第二个 TextSpan: 加粗的蓝色文本 “Flutter”。
- 第三个 TextSpan: 普通文本 "! Welcome to the world of "。
- 第四个 TextSpan: 斜体红色文本 “RichText.”。
- textAlign: TextAlign.center - 文本居中对齐。
- textDirection: TextDirection.ltr - 文本从左到右显示。
- softWrap: true - 启用软换行。
- overflow: TextOverflow.ellipsis - 如果文本溢出,将其截断并显示省略号。
- textScaleFactor: 1.2 - (已弃用)设置文本缩放因子为 1.2。
- maxLines: 2 - 最多显示两行文本。
- locale: Locale(‘en’, ‘US’) - 设置语言环境为美式英语。
- strutStyle: 定义段落内文本的布局策略,设置行高为 1.5。
- textWidthBasis: TextWidthBasis.longestLine - 根据最长行计算文本宽度。
- textHeightBehavior:
- applyHeightToFirstAscent: false - 不应用高度到第一上升线。
- applyHeightToLastDescent: true - 应用高度到最后下降线。
- selectionColor: Colors.yellow - 设置选中文本的背景颜色为黄色。
通过这些配置,你可以用 RichText 创建复杂的、多样式的文本显示,以满足更高级的需求。
示例:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('RichText Example')),
body: Center(
child: RichText(
text: TextSpan(
text: 'Hello, ', // 第一个部分
style: TextStyle(color: Colors.black, fontSize: 24),
children: <TextSpan>[
TextSpan(
text: 'Flutter', // 第二个部分
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: '! Welcome to the world of ',
),
TextSpan(
text: 'RichText.',
style: TextStyle(
color: Colors.red,
fontStyle: FontStyle.italic,
),
),
],
),
textAlign: TextAlign.center,
textDirection: TextDirection.ltr,
softWrap: true,
overflow: TextOverflow.ellipsis,
textScaleFactor: 1.2, // Note: It's deprecated, use textScaler in future versions
maxLines: 2,
locale: Locale('en', 'US'),
strutStyle: StrutStyle(
fontSize: 24,
height: 1.5,
),
textWidthBasis: TextWidthBasis.longestLine,
textHeightBehavior: TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: true,
),
selectionColor: Colors.yellow,
),
),
),
);
}
}
SelectableText
允许用户选择和复制文本,但无法编辑。适用于需要使文本可选择而不希望文本被修改的场景。
属性解析:
const SelectableText(
String this.data, {
super.key,
this.focusNode,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
@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.showCursor = false,
this.autofocus = false,
@Deprecated(
'Use `contextMenuBuilder` instead. '
'This feature was deprecated after v3.3.0-0.5.pre.',
)
this.toolbarOptions,
this.minLines,
this.maxLines,
this.cursorWidth = 2.0,
this.cursorHeight,
this.cursorRadius,
this.cursorColor,
this.selectionHeightStyle = ui.BoxHeightStyle.tight,
this.selectionWidthStyle = ui.BoxWidthStyle.tight,
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection = true,
this.selectionControls,
this.onTap,
this.scrollPhysics,
this.semanticsLabel,
this.textHeightBehavior,
this.textWidthBasis,
this.onSelectionChanged,
this.contextMenuBuilder = _defaultContextMenuBuilder,
this.magnifierConfiguration,
})
- data (String): 必需参数,要显示的文本内容。
- key: 唯一标识符,用于在构建过程中保留状态。
- focusNode (FocusNode?): 用于控制焦点的节点,可以监听和控制焦点状态。
- style (TextStyle?): 文本的样式,包括颜色、字体大小、字体粗细等。
- strutStyle (StrutStyle?): 定义段落内文本的布局策略,可以影响行高和首尾对齐等。
- textAlign (TextAlign?): 文本对齐方式,例如 TextAlign.left, TextAlign.center, TextAlign.right 等。
- textDirection (TextDirection?): 文本方向,指定为从左到右(TextDirection.ltr)或从右到左(TextDirection.rtl)。
- textScaleFactor (double?): 已弃用。用于控制文本缩放因子,建议使用 textScaler 替代它。
- textScaler (TextScaler?): 用于替代 textScaleFactor 的新属性,未来版本将支持非线性文本缩放。
- showCursor (bool): 是否显示光标,默认值为 false。
- autofocus (bool): 自动获取焦点,默认值为 false。
- toolbarOptions (ToolbarOptions?): 已弃用。控制上下文菜单中的选项。
- minLines (int?): 文本最小显示行数。
- maxLines (int?): 文本最大显示行数。
- cursorWidth (double): 光标宽度,默认值为 2.0。
- cursorHeight (double?): 光标高度。
- cursorRadius (Radius?): 光标圆角半径。
- cursorColor (Color?): 光标颜色。
- selectionHeightStyle (ui.BoxHeightStyle): 选择区域的高度样式,默认为 ui.BoxHeightStyle.tight。
- selectionWidthStyle (ui.BoxWidthStyle): 选择区域的宽度样式,默认为 ui.BoxWidthStyle.tight。
- dragStartBehavior (DragStartBehavior): 拖动开始行为,默认值为 DragStartBehavior.start。
- enableInteractiveSelection (bool): 是否启用交互选择,默认值为 true。
- selectionControls (TextSelectionControls?): 自定义选择控件。
- onTap (GestureTapCallback?): 点击事件回调。
- scrollPhysics (ScrollPhysics?): 用于滚动视图的物理效果。
- semanticsLabel (String?): 用于屏幕阅读器的语义标签。
- textHeightBehavior (TextHeightBehavior?): 控制文本高度相关的行为,可以用来调整行间距等。
- textWidthBasis (TextWidthBasis?): 控制文本宽度计算的基准。
- onSelectionChanged (SelectionChangedCallback?): 选择更改时的回调。
- contextMenuBuilder (ContextMenuBuilder): 用于构建自定义上下文菜单的回调,默认值为 _defaultContextMenuBuilder。
- magnifierConfiguration (MagnifierConfiguration?): 配置放大镜效果。
示例:
import 'dart:ui' as ui show BoxHeightStyle, BoxWidthStyle;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('SelectableText Example')),
body: Center(
child: SelectableText(
'Hello, Flutter! This is a selectable text.',
style: TextStyle(
color: Colors.blue,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
textDirection: TextDirection.ltr,
textScaleFactor: 1.2, // Note: It's deprecated, use textScaler in future versions
showCursor: true,
autofocus: true,
cursorColor: Colors.red,
cursorWidth: 3.0,
cursorRadius: Radius.circular(5.0),
selectionHeightStyle: ui.BoxHeightStyle.max,
selectionWidthStyle: ui.BoxWidthStyle.max,
enableInteractiveSelection: true,
onTap: () => print("Text tapped!"),
scrollPhysics: BouncingScrollPhysics(),
semanticsLabel: 'Selectable greeting text',
textHeightBehavior: TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: true,
),
textWidthBasis: TextWidthBasis.longestLine,
onSelectionChanged: (TextSelection selection, SelectionChangedCause? cause) {
print('New selection: ${selection.baseOffset} to ${selection.extentOffset}');
},
contextMenuBuilder: (BuildContext context, EditableTextState editableTextState) {
return AdaptiveTextSelectionToolbar.editableText(
editableTextState: editableTextState,
);
},
),
),
),
);
}
}
CupertinoText
UIKit 风格的文本控件,通常用于构建 iOS 风格的应用。虽然没有单独的 CupertinoText 控件,但是你可以使用 DefaultTextStyle 来设置 Cupertino 风格:
属性解析:
const DefaultTextStyle({
super.key,
required this.style,
this.textAlign,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.maxLines,
this.textWidthBasis = TextWidthBasis.parent,
this.textHeightBehavior,
required super.child,
})
- key: 唯一标识符,用于在构建过程中保留状态。
- style (TextStyle): 必需参数,定义文本的默认样式,包括颜色、字体大小、字体粗细等。
- textAlign (TextAlign?): 文本对齐方式,例如 TextAlign.left, TextAlign.center, TextAlign.right 等。
- softWrap (bool): 是否启用软换行,默认值为 true。
- overflow (TextOverflow): 文本溢出时的处理方式,默认为 TextOverflow.clip。其他选项包括 TextOverflow.ellipsis 和 TextOverflow.fade。
- maxLines (int?): 文本显示的最大行数。如果超过这个数字,多余的行会被裁剪或隐藏。
- textWidthBasis (TextWidthBasis): 控制文本宽度计算的基准。可选值有 TextWidthBasis.parent 和 TextWidthBasis.longestLine,默认值为 TextWidthBasis.parent。
- textHeightBehavior (TextHeightBehavior?): 控制文本高度相关的行为,可以用来调整行间距等。
- child (Widget): 必需参数,要应用默认文本样式的子节点。
示例:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('DefaultTextStyle Example')),
body: Center(
child: DefaultTextStyle(
style: TextStyle(
color: Colors.blue,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 2,
textWidthBasis: TextWidthBasis.parent,
textHeightBehavior: TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: true,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('This is the first line of text.'),
Text('This is the second line of text.'),
Text(
'This text will inherit the default style but override some properties.',
style: TextStyle(
color: Colors.red,
fontSize: 20.0,
),
),
],
),
),
),
),
);
}
}
Text.rich
这是 RichText 的简写形式,它直接使用 Text 构造函数中的 text 参数来创建一个 TextSpan。
属性解释:
const Text.rich(
InlineSpan this.textSpan, {
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,
})
- textSpan: 使用 TextSpan 和 children 来定义不同样式的文本片段。
- 第一个 TextSpan: 普通文本 "Hello, ",字体大小为 24,颜色为黑色。
- 第二个 TextSpan: 加粗的蓝色文本 “Flutter”。
- 第三个 TextSpan: 普通文本 "! Welcome to the world of "。
- 第四个 TextSpan: 斜体红色文本 “Text.rich.”。
- style: 设置默认文本样式,如 fontFamily 为 Arial。
- textAlign: TextAlign.center - 文本居中对齐。
- textDirection: TextDirection.ltr - 文本从左到右显示。
- softWrap: true - 启用软换行。
- overflow: TextOverflow.ellipsis - 如果文本溢出,将其截断并显示省略号。
- textScaleFactor: 1.2 - (已弃用)设置文本缩放因子为 1.2。
- maxLines: 2 - 最多显示两行文本。
- semanticsLabel: ‘Rich text example’ - 用于屏幕阅读器的语义标签。
- textWidthBasis: TextWidthBasis.longestLine - 根据最长行计算文本宽度。
- textHeightBehavior:
- applyHeightToFirstAscent: false - 不应用高度到第一上升线。
- applyHeightToLastDescent: true - 应用高度到最后下降线。
- selectionColor: Colors.yellow - 设置选中文本的背景颜色为黄色。
通过这些配置,你可以用 Text.rich 创建复杂的、多样式的文本显示,以满足更高级的需求。
示例:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Text.rich Example')),
body: Center(
child: Text.rich(
TextSpan(
text: 'Hello, ', // 第一个部分
style: TextStyle(color: Colors.black, fontSize: 24),
children: <TextSpan>[
TextSpan(
text: 'Flutter', // 第二个部分
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: '! Welcome to the world of ',
),
TextSpan(
text: 'Text.rich.',
style: TextStyle(
color: Colors.red,
fontStyle: FontStyle.italic,
),
),
],
),
style: TextStyle(fontFamily: 'Arial'), // 默认样式
textAlign: TextAlign.center,
textDirection: TextDirection.ltr,
softWrap: true,
overflow: TextOverflow.ellipsis,
textScaleFactor: 1.2, // Note: It's deprecated, use textScaler in future versions
maxLines: 2,
semanticsLabel: 'Rich text example',
textWidthBasis: TextWidthBasis.longestLine,
textHeightBehavior: TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: true,
),
selectionColor: Colors.yellow,
),
),
),
);
}
}
总结
- 简单文本: 使用 Text。
- 富文本: 使用 RichText 或 Text.rich。
- 可选择文本: 使用 SelectableText。
- iOS 风格文本: 使用 DefaultTextStyle 配合 Cupertino 风格。
如果你只需要显示文本,大多数情况下 Text 已经能够满足需求,而对于更复杂的样式和功能,你可以选择 RichText、SelectableText 等控件。
备注:
1、TextStyle
TextStyle({
this.inherit = true,
this.color,
this.backgroundColor,
this.fontSize,
this.fontWeight,
this.fontStyle,
this.letterSpacing,
this.wordSpacing,
this.textBaseline,
this.height,
this.leadingDistribution,
this.locale,
this.foreground,
this.background,
this.shadows,
this.fontFeatures,
this.fontVariations,
this.decoration,
this.decorationColor,
this.decorationStyle,
this.decorationThickness,
this.debugLabel,
String? fontFamily,
List<String>? fontFamilyFallback,
String? package,
this.overflow,
})
TextStyle 是 Flutter 中用于定义文本样式的类。它包含了许多可配置的参数,可以用来设置文本的外观。以下是每个参数的详细解释:
- inherit (bool): 是否继承父级文本样式。默认值为 true。
- color (Color?): 文本颜色。例如:Colors.red。
- backgroundColor (Color?): 文本背景颜色。例如:Colors.yellow。
- fontSize (double?): 字体大小。例如:18.0。
- fontWeight (FontWeight?): 字体粗细。例如:FontWeight.bold 或 FontWeight.w500。
- fontStyle (FontStyle?): 字体风格,通常为斜体。例如:FontStyle.italic。
- letterSpacing (double?): 字母间距。例如:1.5。
- wordSpacing (double?): 单词间距。例如:2.0。
- textBaseline (TextBaseline?): 用于对齐文本的基线,例如:TextBaseline.alphabetic。
- height (double?): 行高,是行间距和字体大小的乘积。例如:1.5。
- leadingDistribution (TextLeadingDistribution?): 控制文本顶部和底部空白分布。
- locale (Locale?): 指定语言环境。在国际化应用中使用。
- foreground (Paint?): 文本前景色,用于更复杂的颜色或渐变效果。
- background (Paint?): 文本背景,用于更复杂的颜色或渐变效果。
- shadows (List?): 文本阴影效果。可以设置多个阴影。
- fontFeatures (List?): 字体特性,例如小型大写字母(small-caps)等。
- fontVariations (List?): 字体变体,用于可变字体。
- decoration (TextDecoration?): 文本装饰,例如下划线、删除线等。
- decorationColor (Color?): 装饰线颜色。
- decorationStyle (TextDecorationStyle?): 装饰线样式,例如实线、虚线等。
- decorationThickness (double?): 装饰线厚度。
- debugLabel (String?): 用于调试的标签,开发过程中用于标识不同的文本样式。
- fontFamily (String?): 字体家族名称,例如 ‘Roboto’。
- fontFamilyFallback (List?): 字体家族后备列表,当指定的字体不可用时,依次尝试这些字体。
- package (String?): 字体所在包的名称,常用于从包中加载字体。
- overflow (TextOverflow?): 文本溢出处理方式,例如 TextOverflow.ellipsis。
示例:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('TextStyle Example')),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(
inherit: true,
color: Colors.blue,
backgroundColor: Colors.yellow,
fontSize: 24.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 2.0,
wordSpacing: 4.0,
textBaseline: TextBaseline.alphabetic,
height: 1.5,
shadows: [
Shadow(
offset: Offset(2.0, 2.0),
blurRadius: 3.0,
color: Color.fromARGB(255, 0, 0, 0),
),
],
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.dashed,
decorationThickness: 2.0,
fontFamily: 'Roboto',
fontFamilyFallback: ['NotoSans', 'Arial'],
overflow: TextOverflow.ellipsis,
),
),
),
),
);
}
}
2、Marquee(第三方库)
用于实现跑马灯效果的文本
marquee:https://pub.dev/packages/marquee
3、AutoSizeText(第三方库)
AutoSizeText 是一个可以自动调整字体大小以适应容器大小的文本小部件。
auto_size_text:https://pub.dev/packages/auto_size_text
4、Markdown (第三方库)
用于解析和显示 Markdown 格式文本的小部件。
flutter_markdown:https://pub.dev/packages/flutter_markdown