Flutter Widget 之TextStyle

谋爱先谋生爱人先爱己
1,621 阅读2分钟

严格来说，TextStyle虽不是小部件，但就像生日礼物的彩色包装，与小部件搭配。

TextStyle是tin类中一项顾名思义的工具。因此毕竟是样式文本。

首先，在你的应用中获取一个文本小部件,并添加一个style样式参数。

Text(
    'Hello, Flutter!',
    style: TextStyle(),
)

光这样做不会起任何作用，因此，请在TextStyle26个参数中选一个来用以便发挥作用。等等，26个参数？

  • inherit image.png
  • color image.png
  • backgroundColor image.png
  • fontSize image.png
  • fontWeight image.png
  • fontStyle image.png
  • letterSpacing image.png
  • wordSpacing image.png
  • textBaseline image.png
  • height image.png
  • leadingDIsstribution image.png
  • locale image.png
  • foreground image.png
  • background image.png
  • shadows image.png
  • fontFeatures image.png
  • fontVariations image.png
  • decoration image.png
  • decorationColor image.png
  • decorationStyle image.png
  • decorationThickness image.png
  • debugLabel image.png
  • fontFamily image.png
  • fontFamilyFallback image.png
  • package image.png
  • overflow image.png

每次都要做这么多要指定吗？别担心,要找到就所属应用进行校准的TextStyle值,有很多方法

获取TextStyle值最常见的方法并非产生新值,而是访问你之前定义过的应用主题

Text(
    'Hello, Flutter',
    style: Theme.of!(
        context
    ).textTheme.body1,
)

若目前需要稍微不同的东西,不用为此重做，后去最接近的TextStyle并用copyWith修改即可

Text(
    'Hello, Flutter!',
    style: Theme.of(
        context
    ).textTheme.body1.copyWith(
        ...
    ),
)

当然，如果发现自己不断在做相同的修改，便可考虑用Theme扩展为主题新增固定的TextStyle。

如提供TextStyle的新值并只指定颜色在内的几个参数而其他参数不作设定的话会怎样？

Text(
    'Hello, Flutter!',
    style: TextStyle(
        color: Colors.blue,
    ),
)

这时结果得看几个要素：

如祖先线（ancestral）已有Material小部件，那这里的文本小部件会将部分文本样式TextStyle与Theme所属默认的TextStyle合并。 image.png 但若不使用Material小部件，那便会看红黄两色这些默认的报错主题色 image.png 与所覆盖的值合并 image.png

导致这种状况的最大原因，便是所用的wrap忘了加入Scaffold这个类

Scaffold(
    body: Text(
        'Hello, Flutter!',
        style: TextStyle(
            color: Colors.blue,
        ),
    )
)

image.png

TextStyle可以完成你习惯用HTML、Google Docs或任何文本编辑器来做的事，且多数Flutter开发人员都得打好基础才能有所精进。

如果想了解有关TextStyle的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址

avatar
文章
阅读
粉丝