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 具有非静态宽度，以便它在每个设备上工作。我如何实现所需的行为？

Answer 1

您的 Text 小部件位于 Row 内，因此将其包装在 Expanded 小部件内.你已经有了 TextOverflow.ellipsis 所以这应该可以工作。这样做是将大部分水平 space 用于它（无需在其周围添加固定宽度的 SizedBox 或 Container）。

因此，删除包含 Text 和后退按钮的嵌套 Row，只保留外部 Row ;不需要 Spacer 小部件，因此只需在 Text 小部件周围使用 Expanded 小部件即可工作。这个要点应该为您指明正确的方向。 gist.github.com/romanejaquez/8f9c7b0cf2ceb873ddef5dd7a625b4ec

Flutter：应用栏中的文本溢出

Flutter: Text overflow in appbar

dart

flutter

flutter-layout