flutter:styled_widget组件源码查看10

背景

我们简单介绍了一下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届的一个小学生,希望大家多多指教