时间戳

首页 > 解决方案 > 使用循环或 List.generate 时如何获取容器宽度？

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

问题描述

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

例如，如果这个词是"character"那么颤振将呈现：[c][h][a][r][a][c][t][e][r]

最初，我用它GlobalKeys来检索宽度，但是，由于我将代码拆分为多个文件，我无法弄清楚如何GlobalKeys从另一个文件访问，我也找不到任何关于谷歌如何做到这一点的信息。另外，如果这个词有 20 个字母，那么我需要声明 20GlobalKeys和 amap来存储这 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]),
          );
        }));

标签： androidiosflutterdart

解决方案

如果您更喜欢使用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);
                }(),
              );
            },
          ),
        ),
      ),
    );
  }

推荐阅读