如何在Flexible-flutter集成测试下访问textspan中的文本

Question

我正在尝试从下面的小部件中获取文本（卡路里）。

return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Flexible(
              child: AutoSizeText.rich(
                TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                      text: NumberFormat.decimalPattern(locale).format(
                        calories!.round(),
                      ),
                    ),
                    // reduce spacing between amount and unit as defined in design
                    TextSpan(text: ' ', style: TextStyle(letterSpacing: -5.0)),
                    TextSpan(
                      text: _translate(AppLocalization.Caloriesunitkcal),
                      style: Theme.of(context)
                          .textTheme
                          .bodyText1!
                          .copyWith(color: caloriesTextColor),
                    )
                  ],
                ),
                maxLines: 1,
                minFontSize: AdTheme.smallestUsedTextSize,
                group: _group1,
                style: Theme.of(context)
                    .textTheme
                    .headline3!
                    .copyWith(color: caloriesTextColor),
              ),
            ),
          ],
        ),
        AutoSizeText(
          description!,
          maxLines: 1,
          textAlign: TextAlign.center,
          minFontSize: AdTheme.smallestUsedTextSize,
          group: _group2,
          style: Theme.of(context).textTheme.bodyText1,
        )
      ],
    );
  }

我尝试获取 textspan 的解决方案如下：

 var firstCell = find
          .descendant(
        of: find.byType(Flexible),
        matching: find.byType(TextSpan),
      )
          .evaluate()
          .whereType<Text>()
          .first;
      print(firstCell.data);

但是这个解决方案不允许我获取这个文本跨度中的文本。

如果有人对此有一些见解并曾处理过类似类型的数据，请提供帮助。

Answer 1

您的小部件应该对 UI 状态做出反应，我建议您将这些变量放在小部件本身之外，如果您在小部件之外拥有 UIModel，则声明式 UI（例如 Flutter、Compose 或 SwiftUI）的目标是您不需要需要直接从小部件访问数据，因为您使用 UI 模型在屏幕上准确绘制您想要的内容，所以我会考虑这样的事情：

var calories = NumberFormat.decimalPattern(locale).format(calories!.round());

return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Flexible(
              child: AutoSizeText.rich(
                TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                      text: caloriesText,
                      ),
                    ),
                    // reduce spacing between amount and unit as defined in design
                    TextSpan(text: ' ', style: TextStyle(letterSpacing: -5.0)),
                    TextSpan(
                      text: _translate(AppLocalization.Caloriesunitkcal),
                      style: Theme.of(context)
                          .textTheme
                          .bodyText1!
                          .copyWith(color: caloriesTextColor),
                    )
                  ],
                ),
                maxLines: 1,
                minFontSize: AdTheme.smallestUsedTextSize,
                group: _group1,
                style: Theme.of(context)
                    .textTheme
                    .headline3!
                    .copyWith(color: caloriesTextColor),
              ),
            ),
          ],
        ),
        AutoSizeText(
          description!,
          maxLines: 1,
          textAlign: TextAlign.center,
          minFontSize: AdTheme.smallestUsedTextSize,
          group: _group2,
          style: Theme.of(context).textTheme.bodyText1,
        )
      ],
    );
  }

希望有意义