Flutter: 应用栏中的文本溢出

Question

我有一个看起来像这样的应用栏：

用户可以更改应用栏中的文本。然而，过长的文本会导致溢出错误：

我认为将特定的Text包装在Flexible小部件中将解决此问题，但是当使用Flexible方法时，我遇到了无法解决的错误：

RenderBox was not laid out: RenderFlex#0ac34 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

以下是屏幕截图中的可工作代码：

PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight + 60),
        child: Container(
          color: getAppBarColor(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      children: [
                        Visibility(
                          visible: hasBack,
                          child: IconButton(
                            onPressed: () {
                              Navigator.pop(context);
                            },
                            icon: Icon(Icons.arrow_back_ios,
                                color: getContentColor()),
                          ),
                        ),
                        Text(
                          title,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: fontSize,
                            color: getContentColor(),
                            fontWeight: FontWeight.w600,
                          ),
                        )
                      ],
                    ),
                  ),
                  const Spacer(),
                  Visibility(
                    visible: hasSettings,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: getIconButton(context),
                    ),
                  ),
                  ...getExtraIconButton()
                ],
              ),
            ],
          ),
        ),
      )

如果文本过长，我希望它能够动态地使用“…”进行缩写。一种简单的解决方法是使用SizedBox，但是为了让它在每个设备上都能正常工作，我需要使SizedBox具有非静态宽度。

我该如何实现所需的行为？

- Josip Domazet

Answer 1

您的 Text 小部件位于一个 Row 内，因此请将它包装在一个 Expanded 小部件中。您已经对其使用了 TextOverflow.ellipsis，因此这应该有效。这么做的作用是将大部分水平空间用于它（无需在其周围添加固定宽度的 SizedBox 或 Container）。

因此，请删除包含 Text 和返回按钮的嵌套 Row，只保留外部的 Row；不需要使用 Spacer 小部件，只需在 Text 小部件周围使用一个 Expanded 小部件即可解决问题。

这个 Gist 应该会指引你朝着正确的方向前进。 gist.github.com/romanejaquez/8f9c7b0cf2ceb873ddef5dd7a625b4ec

- Roman Jaquez

---

使用 Expanded 小部件会导致与使用 Flexible 小部件时相同的错误 :/ - Josip Domazet

有趣。看看这个Gist（https://gist.github.com/romanejaquez/8f9c7b0cf2ceb873ddef5dd7a625b4ec），在Dartpad.dev上运行它。对我来说，它显示省略号。很乐意帮助您找到问题的根源。 - Roman Jaquez

好的！很高兴这个要点能帮助你找到正确的方向 - 干杯！ - Roman Jaquez