No Directionality widget found错误背后的原理

Posted 2021-12-07 牧羊人.阿标

文章目录

• 背景
• 原理

背景

我们常在做Flutter开发的时候经常会碰到No Directionality widget found这种错误。这种错误产生的原因很简单就是因为在使用Text这个widget的时候，没有给他指定textDirection，在其构造方法里面加上即可修复问题，eg:

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //样例
    return Container(
      child: Column(
        children: const [
          Text(
            'Hello!',
            // 去掉这个属性会报错
            textDirection: TextDirection.ltr,
          ),
          Text(
            'Goodbye!',
            // 去掉这个属性会报错
            textDirection: TextDirection.ltr,
          ),
        ],
      ),
    );
  }
}

还有些同学在使用Text这个widget的时候，又没有报错，这是为什么呢？下面我们来看看原理。

原理

​ 在Flutter里面文本流动是有方向。有些语言是从左到右书写的（例如，英语、泰米尔语或中文），而其他语言是从右到左书写的（例如阿拉姆语、希伯来语或乌尔都语）。有些也用混合书写，例如阿拉伯语大多从右到左书写，数字从左到右书写。文本方向必须提供给呈现文本或水平布局框的 API，以便它们可以确定从哪个方向开始：从右到左，[TextDirection.rtl]；或从左到右，[TextDirection.ltr]。

​ 设计讨论 Flutter 旨在满足以世界上任何一种当前使用的语言编写的应用程序的需求，无论它们使用从右到左还是从左到右的书写方向。 Flutter 不支持其他书写模式，例如垂直文本或 boustrophedon 文本，因为这些在计算机程序中很少使用。在开发用户界面框架时，通常会选择默认的文本方向——通常是从左到右，这是在框架上工作的工程师最熟悉的方向——因为这简化了平台上应用程序的开发。不幸的是，这经常导致平台具有意外的从左到右的偏差或假设，因为工程师通常会错过他们需要支持从右到左文本的地方。这会导致仅在从右到左的环境中出现的错误。为了尽量减少 Flutter 遇到此类问题的程度，Flutter 框架的最低级别没有默认的文本阅读方向。任何时候都需要读取方向，例如要显示文本时，或者要解释与写入方向相关的值时，必须明确指定读取方向。在可能的情况下，例如在 switch 语句中，首先列出从右到左的情况，以避免给人一种事后才想到的印象。

​ 在更高级别（特别是从小部件库开始），引入了[Directionality]，它提供了默认值。因此，例如，[MaterialApp] 小部件范围内的 [Text] 小部件不需要给出明确的书写方向。 [Directionality.of] 静态方法可用于获取特定 [BuildContext] 的环境文本方向。

​ Flutter 尽管有上述设计意图，但是某些从左到右的偏差仍然潜入 Flutter 的设计中。其中包括： * [Canvas] 原点在左上角，x 轴从左到右增加。 * 小部件和材料库中的默认本地化是美式英语，从左到右。

​ 视觉属性与方向属性 Flutter 框架中的许多类都提供了两个版本，一个是面向视觉的变体，另一个是与文本方向相关的变体。比如[EdgeInsets]用top、left、right、bottom来描述，而[EdgeInsetsDirectional]用top、start、end、bottom来描述，其中start和end分别对应right和left——在从左到右的文本中从左到右的文本和左右。这些变体中的每一个都有不同的用例。在开发应该随文本方向“翻转”的用户界面时，依赖于文本方向的变体非常有用。例如，英语中的一段文本通常会左对齐，引用会从左边缩进，而在阿拉伯语中，它会右对齐并从右边缩进。这两种情况都由方向相关的 [TextAlign.start] 和 [EdgeInsetsDirectional.start] 描述。相比之下，当文本方向已知且不受阅读方向影响时，视觉变体很有用。例如，提供行车路线的应用程序可能会在左侧显示“左转”箭头，在右侧显示“右转”箭头——无论应用程序本地化为法语（从左到右）还是希伯来语，都会这样做（右到左）。在实践中，预计许多开发人员只会针对一种语言，在这种情况下，从视觉角度思考可能会更简单。