AnimatedContainer 内的文本溢出答案

【问题标题】：Text inside AnimatedContainer overflowsAnimatedContainer 内的文本溢出
【发布时间】：2021-02-03 19:06:58
【问题描述】：

我目前在 AnimatedContainer 中使用 AnimatedContainer 和 LinearProgressIndicator。这是我当前的代码：

LayoutBuilder(
                  builder: (context, constraints) => AnimatedContainer(
                    width: expanded ? constraints.maxWidth : 0,
                    duration: Duration(milliseconds: 250),
                    child: Container(
                      color: Colors.red,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(trackName, maxLines: 1, overflow: TextOverflow.ellipsis),
                          Text(artists.join(", "), maxLines: 1, overflow: TextOverflow.ellipsis),
                          if (currentProgressValue != null)
                            Row(
                              children: [
                                Text(currentProgress.minutes.toString() + ":" + currentProgress.seconds.toString(),
                                    maxLines: 1, overflow: TextOverflow.ellipsis),
                                Expanded(
                                  child: LinearProgressIndicator(
                                    valueColor: new AlwaysStoppedAnimation<Color>(MyTheme.primaryColor),
                                    value: currentProgressValue / songDuration,
                                  ),
                                ),
                              ],
                            ),
                        ],
                      ),
                    ),
                  ),
                ),

问题是在“if (currentProgressValue != null)”之后的第一个文本在 AnimatedContainer 压缩时溢出。有效的解决方案是将 Text 和 LinearProgressIndicator 都放在 Expanded 内，但这样做会将空间分成两半，这不是我想要的。我不会使用 LinearProgressIndicator 来填充文本的剩余空间。你知道如何解决这个问题吗？

【问题讨论】：

标签： flutter dart

【解决方案1】：

而不是扩展使用灵活。使用 Flexible 包装容器变大时可能溢出的小部件。

【讨论】：

我已经尝试过了，但是 2 个小部件仍然共享宽度，导致它们的大小相等。
好的，据我了解，您不希望它们占用相等的空间。（如果我错了，请纠正我）您是否尝试过扩展小部件的 flex 参数？它指定了 flex 小部件内的小部件应该如何使用（例如，您有 2 个小部件在一行中，并且您有 flex 为它们 2 和 1 行将被拆分为三个，而带有 2 的 flex 将占据 2 倍的位置）
是的，现在我已经用 flex 解决了，但我更愿意让 2 个小部件中的一个获得所有剩余空间，而不是按 flex 百分比拆分它。
你可以用容器包装文本小部件并给它一个宽度，展开的小部件将占用剩余空间
如果我这样做，当我设置 AnimatedContainer 宽度 = 0 时，文本会溢出