Flutter 修复列内文本溢出问题

Question

我有以下显示文本溢出错误的代码。我想要空间内的包装。我尝试在 Text 上应用扩展，但它不起作用。

return Stack(
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Center(child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Center(child: Text(entitlements.value.identifier, textAlign: TextAlign.center, style: TextStyle(color: Colors.white),)),
              )),
            ],
          ),
          margin: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            //shape: ,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(boxRadius),
                topRight: Radius.circular(boxRadius),
                bottomLeft: Radius.circular(boxRadius),
                bottomRight: Radius.circular(boxRadius)),
            color: dGreen,
          ),
        ),
        Positioned.fill(
          bottom: 35.0,
          child: Container(
            child: Row(
              children: [
                Container(
                    padding: EdgeInsets.all(8.0),
                    child: Icon(Icons.supervised_user_circle, color: blue, size: 50.0,)),
                entitlements.value.identifier=='50 People'
                    ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    getText('50 People'),
                    getSubText('50 People')
                  ],
                )
                    :entitlements.value.identifier=='20 People'
                    ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    getText('20 People'),
                   getSubText('20 People')
                  ],
                )
                    : Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    getText('10 People'),
                    getSubText('10 People')
                    ],
                )
              ],
            ),
            margin: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(boxRadius),
                  topRight: Radius.circular(boxRadius),
                  bottomLeft: Radius.circular(boxRadius),
                  bottomRight: Radius.circular(boxRadius)),
              color: Colors.white,
            ),
          ),
        ),
      ],
    );

════════ 渲染库捕获的异常 ══════════════════════════════════════════════════ ═══以下 布局期间抛出断言：A RenderFlex 溢出 56 右边的像素。

相关的导致错误的小部件是：行 行：file:///Users/D/Desktop/FlutterApps/myapp/lib/CustomWidgets/stackedBoxSubscription.dart:41:20 ：要在 Flutter DevTools 中检查这个小部件，请访问： http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A57033%2FbBcIVimG4UU%3D%2F&inspectorRef=inspector-52090 溢出的 RenderFlex 的方向为 Axis.horizo​​ntal。这 溢出的 RenderFlex 边缘已在 用黄色和黑色条纹图案渲染。这通常是 由于内容对于 RenderFlex 来说太大。

考虑应用弹性因子（例如，使用扩展小部件） 强制 RenderFlex 的子级适应可用空间 而不是按其自然大小调整大小。这被认为是 错误条件，因为它表明有内容不能 可见。如果内容合法地大于可用的 空间，请考虑在放置之前使用 ClipRect 小部件对其进行裁剪 在 flex 中，或者使用可滚动容器而不是 Flex，例如 一个列表视图。

有问题的具体 RenderFlex 是：RenderFlex#5c08b OVERFLOWING ... parentData：（可以使用大小）...约束： BoxConstraints(w=374.0, h=79.0) ... 尺寸：尺寸(374.0, 79.0) ... 方向：水平... mainAxisAlignment：开始... mainAxisSize： 最大 ... crossAxisAlignment: center ... textDirection: ltr ... 垂直方向：向下

Answer 1

解决方案 1：在 Row 小部件内，将列包裹在 Flexible 内。 解决方案 2：使用 pub.dev 上提供的 AutoSized Text 包

Answer 2

这样做 用 Expanded Widget 包裹您的 Row 小部件

Expanded(
  flex:1,
  child : Row(
    children: [
      //your code and widgets
    ]
  )
)

如果对您有用，请将此答案标记为正确