Flutter中Text组件内容溢出求助：已尝试Flexible无效

我尝试用Flexible包裹描述文本的Text组件，但还是无法解决溢出问题，相关代码如下：

class CardVerticalListItem extends StatelessWidget {
  ProductItem _productItem;
  Offer? _offer;

  CardVerticalListItem(this._productItem, this._offer);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.of(context).push(PageRouteBuilder(
            pageBuilder: (_, __, ___) => new ProductDetails(
                  title: _productItem.name,
                  id: _productItem.id,
                  image: _productItem.thumbnail_url,
                ),
            transitionDuration: Duration(milliseconds: 600),
            transitionsBuilder: (_, Animation<double> animation, __, Widget child) {
              return Opacity(
                opacity: animation.value,
                child: child,
              );
            }));
      },
      child: Padding(
        padding: const EdgeInsets.only(top: 15.0, left: 15.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Stack(
              children: <Widget>[
                Hero(
                  tag: 'hero-tag-${_productItem.id}',
                  child: Material(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    color: Color(0xFF1E2026),
                    child: Container(
                      width: 130.0,
                      height: 130.0,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: CachedNetworkImageProvider(
                            _productItem.thumbnail_url,
                            errorListener: () => new Icon(Icons.error),
                          ),
                          fit: BoxFit.contain,
                        ),
                        boxShadow: [BoxShadow(blurRadius: 0.0, color: Colors.black87)],
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        gradient: LinearGradient(colors: [
                          Color(0xFF1E2026),
                          Color(0xFF23252E),
                        ], begin: Alignment.topLeft, end: Alignment.bottomRight),
                      ),
                    ),
                  ),
                ),
                if (_offer == null) ...{
                  Container(),
                } else ...{
                  Align(
                    alignment: Alignment.topLeft,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 2.0, top: 2.0),
                      child: Container(
                        height: 35.0,
                        width: 35.0,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.all(Radius.circular(40.0))),
                        child: Center(
                          child: Text(
                            "${_offer!.percentage}%",
                            style: TextStyle(
                                fontFamily: "Sofia",
                                color: Colors.white,
                                fontWeight: FontWeight.w700,
                                fontSize: 14.0),
                          ),
                        ),
                      ),
                    ),
                  ),
                }
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15.0, top: 25.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    _productItem.name,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white,
                        fontFamily: "Sofia",
                        fontSize: 16.0,
                        fontWeight: FontWeight.w600),
                  ),
                  SizedBox(height: 2.0),
                  // 出现问题的Text组件
                  Text(
                    _productItem.description,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white70,
                        fontFamily: "Sofia",
                        fontSize: 14.0,
                        fontWeight: FontWeight.w300),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        "${_productItem.display_price} ${_productItem.currency}",
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: "Sofia",
                            fontSize: 16.0,
                            fontWeight: FontWeight.w600),
                      ),
                      if (_offer == null) ...{
                        Container(),
                      } else ...[
                        SizedBox(width: 5.0),
                        Text(
                          "${_offer!.applyOffer(_productItem)} ${_productItem.currency}",
                          style: TextStyle(
                              color: Colors.white70,
                              fontFamily: "Sofia",
                              fontSize: 13.0,
                              decoration: TextDecoration.lineThrough,
                              fontWeight: FontWeight.w600),
                        )
                      ]
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题原因 #

Row组件中，右侧的Column没有宽度约束——Row会给未被限制的子组件分配无限水平空间，导致Column里的Text组件可以无限延伸，即使设置了maxLines和overflow也不会触发截断。直接给Text套Flexible没用，因为父级Column本身没有宽度限制。

解决方案 #

将右侧的Padding（包含Column）用Expanded包裹，让它占据Row中除左侧固定宽度图片外的剩余空间，这样Column就有了明确的宽度约束，内部的Text组件就能正常触发溢出截断。

修改后的关键代码片段：

// 替换原Row中的右侧Padding部分
Expanded(
  child: Padding(
    padding: const EdgeInsets.only(left: 15.0, top: 25.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        // 原有Text、SizedBox等组件保持不变
      ],
    ),
  ),
)

如果需要更灵活的空间分配，也可以用Flexible替代Expanded，但Expanded会强制占满剩余空间，更适合这个场景。

内容的提问来源于stack exchange，提问作者AndreiBogdan