群组
Flutter,iOS,Android,Python等,闲聊工作&技术&问题;
个人主页:https://waitwalker.cn
telegram群链接:https://t.me/joinchat/Ej0o0A1ntlq5ZFIMzzO5Pw
在Flutter中文本的显示可以用Text Widget来实现.Text的初始化方法必须带上一个string类型的参数,Text类中也定义了一些常用的属性.
Text基本属性
/// The text to display.
///
/// This will be null if a [textSpan] is provided instead.
final String data;
/// The text to display as a [InlineSpan].
///
/// This will be null if [data] is provided instead.
final InlineSpan textSpan;
/// If non-null, the style to use for this text.
///
/// If the style's "inherit" property is true, the style will be merged with
/// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
/// replace the closest enclosing [DefaultTextStyle].
final TextStyle style;
/// {@macro flutter.painting.textPainter.strutStyle}
final StrutStyle strutStyle;
/// How the text should be aligned horizontally.
final TextAlign textAlign;
/// The directionality of the text.
///
/// This decides how [textAlign] values like [TextAlign.start] and
/// [TextAlign.end] are interpreted.
///
/// This is also used to disambiguate how to render bidirectional text. For
/// example, if the [data] is an English phrase followed by a Hebrew phrase,
/// in a [TextDirection.ltr] context the English phrase will be on the left
/// and the Hebrew phrase to its right, while in a [TextDirection.rtl]
/// context, the English phrase will be on the right and the Hebrew phrase on
/// its left.
///
/// Defaults to the ambient [Directionality], if any.
final TextDirection textDirection;
/// Used to select a font when the same Unicode character can
/// be rendered differently, depending on the locale.
///
/// It's rarely necessary to set this property. By default its value
/// is inherited from the enclosing app with `Localizations.localeOf(context)`.
///
/// See [RenderParagraph.locale] for more information.
final Locale locale;
/// Whether the text should break at soft line breaks.
///
/// If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
final bool softWrap;
/// How visual overflow should be handled.
final TextOverflow overflow;
/// The number of font pixels for each logical pixel.
///
/// For example, if the text scale factor is 1.5, text will be 50% larger than
/// the specified font size.
///
/// The value given to the constructor as textScaleFactor. If null, will
/// use the [MediaQueryData.textScaleFactor] obtained from the ambient
/// [MediaQuery], or 1.0 if there is no [MediaQuery] in scope.
final double textScaleFactor;
/// An optional maximum number of lines for the text to span, wrapping if necessary.
/// If the text exceeds the given number of lines, it will be truncated according
/// to [overflow].
///
/// If this is 1, text will not wrap. Otherwise, text will be wrapped at the
/// edge of the box.
///
/// If this is null, but there is an ambient [DefaultTextStyle] that specifies
/// an explicit number for its [DefaultTextStyle.maxLines], then the
/// [DefaultTextStyle] value will take precedence. You can use a [RichText]
/// widget directly to entirely override the [DefaultTextStyle].
final int maxLines;
/// An alternative semantics label for this text.
///
/// If present, the semantics of this widget will contain this value instead
/// of the actual text. This will overwrite any of the semantics labels applied
/// directly to the [TextSpan]s.
///
/// This is useful for replacing abbreviations or shorthands with the full
/// text value:
///
/// Text(r'$$', semanticsLabel: 'Double dollars')
final String semanticsLabel;
/// {@macro flutter.dart:ui.text.TextWidthBasis}
final TextWidthBasis textWidthBasis;
TextStyle属性
设置字体颜色,大小一些属性封装在TextStyle类中了:
/// Creates a text style.
///
/// The `package` argument must be non-null if the font family is defined in a
/// package. It is combined with the `fontFamily` argument to set the
/// [fontFamily] property.
const TextStyle({
this.inherit = true,
this.color,
this.backgroundColor,
this.fontSize,
this.fontWeight,
this.fontStyle,
this.letterSpacing,
this.wordSpacing,
this.textBaseline,
this.height,
this.locale,
this.foreground,
this.background,
this.shadows,
this.fontFeatures,
this.decoration,
this.decorationColor,
this.decorationStyle,
this.decorationThickness,
this.debugLabel,
String fontFamily,
List<String> fontFamilyFallback,
String package,
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
_fontFamilyFallback = fontFamilyFallback,
_package = package,
assert(inherit != null),
assert(color == null || foreground == null, _kColorForegroundWarning),
assert(backgroundColor == null || background == null, _kColorBackgroundWarning);
Text基本使用
常用的一些Text方法:
Text("Hello World, flutter is coming" * 4,
textAlign: TextAlign.center,//文本对齐方式
maxLines: 10,//最大行数
textScaleFactor: 1.5,//字体大小缩放倍数
overflow: TextOverflow.ellipsis,//长度超过屏幕,显示方式
style: TextStyle(
color: Colors.black,//颜色
fontSize: 18.0,//字体大小
height: 1.5,//字体高度
// fontFamily: 字体
backgroundColor: Colors.orange,//背景颜色
decoration: TextDecoration.underline,//装饰 下划线
decorationColor: Colors.green,//下划线颜色
decorationStyle: TextDecorationStyle.double,//下划线样式
),
),
Text富文本
Text的富文本主要通过TextSpan来实现:
Text.rich(
TextSpan(
children: [
TextSpan(
text: "Hello",
style: TextStyle(
color:Colors.purple,
fontSize: 25.0,
height: 2,
),
),
TextSpan(
text: "I am .",
style: TextStyle(
height: 1.5,
color: Colors.green,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
TextSpan(
text: "Flutter",
style: TextStyle(
color: _toggle ? Colors.lime : Colors.pink,
decoration: TextDecoration.underline,
fontSize: 30.0,
height: 2.5,
),
recognizer: _tapGestureRecognizer
..onTap = (){
setState(() {
_toggle = !_toggle;
});
}
),
]
),
),
