使用循环或 List.generate 时如何获取容器宽度？

Posted 2023-03-12

【中文标题】使用循环或 List.generate 时如何获取容器宽度？

【英文标题】：How to get containers width when using a loop or List.generate?

【发布时间】：2021-09-23 05:54:35

【问题描述】：

我正在将单词的单个字母生成到它们自己的容器中，我需要获取每个容器的宽度并将它们添加到列表中。我该如何实现这一目标？

例如，如果单词是"character"，那么flutter会渲染：[c][h][a][r][a][c][t][e][r]

最初，我使用GlobalKeys 来检索宽度，但是，由于我将代码拆分为多个文件，我无法弄清楚如何从另一个文件访问GlobalKeys，我找不到任何信息在谷歌上如何做到这一点。另外，如果这个词有 20 个字母，那么我需要声明 20 个 GlobalKeys 和一个 map 来存储这 20 个键。

我认为如果有一种方法可以检索每个容器的宽度并在生成它们时将它们存储在一个列表中。

String displayWord = "character";

final [key0 to key19] = GlobalKey(); //PREVIOUS APPROACH
Map keys =  ** map of 20 keys ** ; //PREVIOUS APPROACH
.
.
.
    return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: List.generate(displayWord.length, (index) 
          return Container(
            key: keys[index], //PREVIOUS APPROACH
            child: Text(displayWord[index]),
          );
        ));

【问题讨论】：

虽然您喜欢character 到[c][h][a][r][a][c][t][e][r]，但我们可以根据位置简单地包含[]。您能否包含您想要存档的输出图像。

我不关注你。你能解释更多吗？我想要宽度的原因是我可以手动计算字母之间边框的位置。因为在屏幕上呈现单词后，我需要在每个字母的中心直接对线条进行动画处理。如果您有更好的方法，那么我对这个想法持开放态度。您是否建议有一种方法可以获取每个容器的位置？

虽然优先渲染[x]格式，你可以做Text("[$displayWord[index]]"),，如果你想有不同的风格，我更喜欢RichText而不是使用Row。我想说我们不需要容器。此外，一切都取决于您喜欢如何制作动画。你能包括一个gif吗

我对样式的兴趣并不像我对找到一种方法来获得每个字母之间的精确中心一样感兴趣。我不确定 'Text("[$displayWord[index]]")' 将如何帮助我实现这一目标。我还是新手。你会来帮我做吗？

【参考方案1】：

借助这里的答案，我做了类似的事情：https://***.com/a/62536187/679553

您可以使用该代码计算具有特定样式的文本的大小。

【参考方案2】：

如果您更喜欢使用GlobalKey：

  static const letter = 'character';
  static final keys = List.generate(letter.length, (_) => GlobalKey());

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: Row(
          children: List.generate(
            letter.length,
            (index) 
              final key = keys[index];
              return Container(
                key: key,
                child: () 
                  final char = letter[index];
                  Future.delayed(Duration.zero, () 
                    final width =
                        (key.currentContext?.findRenderObject() as RenderBox)
                            .size
                            .width;
                    print('$char: $width');
                  );

                  return Text(char);
                (),
              );
            ,
          ),
        ),
      ),
    );