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()
                ],
              ),
            ],
          ),
        ),
      )

如果文本太长，我希望文本动态缩写为“...”。一个肮脏的修复是使用 a SizedBox，但是，我会以某种方式需要SizedBox它具有非静态宽度才能在每个设备上工作。我如何实现所需的行为？

Answer 1

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

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