flutter:styled_widget组件源码查看10

「这是我参与11月更文应战的第24天，活动详情查看：2021最终一次更文应战」

背景

咱们简单介绍了一下styled_widget的功用,今天咱们来详细的看看有该结构有哪些Widget,别的是怎么完成的,Widget列表传送门

Text及TextSpan介绍

之前咱们把widget、Icon及list的扩展都介绍完了,今天咱们看下Text的扩展,TextSpan就不介绍了,跟Text的完成方式和运用方式都是一样的

textStyle

功用: 改动字体款式

该extension中同样包含一个copywith的方法,会复制一个Text,并修改特点

T copyWith({
  String? data,
  TextStyle? style,
  StrutStyle? strutStyle,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  bool? softWrap,
  TextOverflow? overflow,
  double? textScaleFactor,
  int? maxLines,
  String? semanticsLabel,
  TextWidthBasis? textWidthBasis,
}) =>
    (this is _StyledAnimatedTextContainer
        ? _StyledAnimatedTextContainer(
            data ?? this.data ?? "",
            style: style ?? this.style,
            strutStyle: strutStyle ?? this.strutStyle,
            textAlign: textAlign ?? this.textAlign,
            locale: locale ?? this.locale,
            maxLines: maxLines ?? this.maxLines,
            overflow: overflow ?? this.overflow,
            semanticsLabel: semanticsLabel ?? this.semanticsLabel,
            softWrap: softWrap ?? this.softWrap,
            textDirection: textDirection ?? this.textDirection,
            textScaleFactor: textScaleFactor ?? this.textScaleFactor,
            textWidthBasis: textWidthBasis ?? this.textWidthBasis,
          )
        : Text(
            data ?? this.data ?? "",
            style: style ?? this.style,
            strutStyle: strutStyle ?? this.strutStyle,
            textAlign: textAlign ?? this.textAlign,
            locale: locale ?? this.locale,
            maxLines: maxLines ?? this.maxLines,
            overflow: overflow ?? this.overflow,
            semanticsLabel: semanticsLabel ?? this.semanticsLabel,
            softWrap: softWrap ?? this.softWrap,
            textDirection: textDirection ?? this.textDirection,
            textScaleFactor: textScaleFactor ?? this.textScaleFactor,
            textWidthBasis: textWidthBasis ?? this.textWidthBasis,
          )) as T

然后当咱们调用textStyle时,内部就会调用copyWith更改相应的特点,到达更改字体款式的目的

运用方法

Container(
  child: Text('text').textStyle(TextStyle(color: Colors.red)).center()
)

其他扩展

1.textScale:文字放大

2.bold:文字加粗

3.italic:文字歪斜

4.fontWeight:文字自重

5.fontFamily:字体

6.letterSpacing:文字距离

7.wordSpacing:单词距离(中文也能够)

8.textShadow:文字暗影

9.textElevation:文字投影

10.textColor:文字色彩

11.textAlignment:文字对齐方式

12.textBaseline:基线，两个值，字面意思是alphabetic用来排字母的，ideographic用来排表意字的（类似中文）,

运用及代码展示

Container(
  child: [
    Text('textScale').textScale(2),
    Text('bold').bold(),
    Text('italic').italic(),
    Text('fontWeight').fontWeight(FontWeight.w500),
    Text('fontFamily').fontFamily(''),
    Text('letterSpacing').letterSpacing(5),
    Text('word Spacing 单词 距离').wordSpacing(15),
    Text('textShadow').textShadow(color: Colors.red,blurRadius: 5),
    Text('textElevation').textElevation(5,angle: 20),
    Text('textColor').textColor(Colors.red),
    Text('textAlignment').textAlignment(TextAlign.right),
    Text('textBaseline').textBaseline(TextBaseline.ideographic),
  ].toColumn().center()
)

结语

今天现已把text扩展写完了, 明日开端将动画的完成部分

希望我们把一些好的三方分享出来,打在评论区,共同学习,共同进步

作为Flutter届的一个小学生,希望我们多多指教