首页 > 解决方案 > Flutter 错误:具有多个子项的 RenderFlex 的 textDirection 为空

问题描述

我正在测试一个包含以下代码的小部件(改编自此处):

await tester.pumpWidget(
  MediaQuery(
    data: const MediaQueryData(devicePixelRatio: 1.0),
    child: FocusScope(
      node: focusScopeNode,
      autofocus: true,
      child: Row(
        children: <Widget>[
          MongolEditableText(
            key: key1,
            controller: TextEditingController(),
            focusNode: focusNode,
            style: const TextStyle(fontSize: 9),
            cursorColor: cursorColor,
          ),
          MongolEditableText(
            key: key2,
            controller: TextEditingController(),
            focusNode: focusNode,
            style: const TextStyle(fontSize: 9),
            cursorColor: cursorColor,
          ),
        ],
      ),
    ),
  ),
);

但是当我这样做时,我得到以下异常:

具有多个子项的水平 RenderFlex 的 textDirection 为空,因此未定义布局顺序。

我尝试向textDirection我正在测试的自定义小部件添加一个参数,但这并没有改变任何东西。

我在这里找到了答案,所以我在下面添加了一个答案。

标签: flutterdarttext-direction

解决方案


一个 flex 小部件喜欢RowColumn需要知道其子元素的文本方向。有三种方法可以做到这一点。

1. 使用 WidgetsApp 祖先

MaterialApp 和 CupertinoApp 在内部使用 WidgetsApp。这些都提供了默认的方向性。

MaterialApp(
  home: MyWidgetTree(
    child: Row(
      children: <Widget>[

2. 用 Directionality 小部件包装

您还可以使用Directionality小部件包装该行并为其指定方向,如下所示:

Directionality(
  textDirection: TextDirection.ltr,
  child: Row(
    children: <Widget>[

3.添加一个textDirection属性

您可以使用属性给出Row一个方向:textDirection

Row(
  textDirection: TextDirection.ltr,
  children: <Widget>[

资源

感谢此评论的帮助。


推荐阅读