likes
comments
collection
share

Flutter Widget 之TextStyle

作者站长头像
站长
· 阅读数 10

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

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

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

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

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

  • inherit Flutter Widget 之TextStyle
  • color Flutter Widget 之TextStyle
  • backgroundColor Flutter Widget 之TextStyle
  • fontSize Flutter Widget 之TextStyle
  • fontWeight Flutter Widget 之TextStyle
  • fontStyle Flutter Widget 之TextStyle
  • letterSpacing Flutter Widget 之TextStyle
  • wordSpacing Flutter Widget 之TextStyle
  • textBaseline Flutter Widget 之TextStyle
  • height Flutter Widget 之TextStyle
  • leadingDIsstribution Flutter Widget 之TextStyle
  • locale Flutter Widget 之TextStyle
  • foreground Flutter Widget 之TextStyle
  • background Flutter Widget 之TextStyle
  • shadows Flutter Widget 之TextStyle
  • fontFeatures Flutter Widget 之TextStyle
  • fontVariations Flutter Widget 之TextStyle
  • decoration Flutter Widget 之TextStyle
  • decorationColor Flutter Widget 之TextStyle
  • decorationStyle Flutter Widget 之TextStyle
  • decorationThickness Flutter Widget 之TextStyle
  • debugLabel Flutter Widget 之TextStyle
  • fontFamily Flutter Widget 之TextStyle
  • fontFamilyFallback Flutter Widget 之TextStyle
  • package Flutter Widget 之TextStyle
  • overflow Flutter Widget 之TextStyle

每次都要做这么多要指定吗?别担心,要找到就所属应用进行校准的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合并。 Flutter Widget 之TextStyle 但若不使用Material小部件,那便会看红黄两色这些默认的报错主题色 Flutter Widget 之TextStyle 与所覆盖的值合并 Flutter Widget 之TextStyle

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

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

Flutter Widget 之TextStyle

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

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

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