如何防止水平溢出？答案

【问题标题】：How to prevent Overflow Horizontally?如何防止水平溢出？
【发布时间】：2020-03-16 22:30:52
【问题描述】：

我正在努力完成这项工作，但我尝试了一切，但仍然无法完成这项工作。所以，我的结构如下：

Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      CircleAvatar(
        radius: 40.0,
        backgroundImage: Image
            .network(
          '$thumbnail',
          fit: BoxFit.cover,
        )
            .image,
      ),
      SizedBox(
        width: 20,
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Really biiiig drink name here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28
            ),
          ),
          Text(
            'Category goes here',
            style: TextStyle(
              color: Colors.white.withOpacity(.8)
            ),
          ),
        ],
      ),
    ],
  ),

它呈现如下：

overflow

如何在不为父小部件定义固定宽度的情况下剪辑或包装标题文本？

【问题讨论】：

查看这个答案stackoverflow.com/a/54222581/5882307
将您的 Column 包装在 Expanded 小部件中
将@OMiShah 答案与ChyperX 结合起来，我实现了我想要的。谢谢你们。

标签： flutter flutter-layout

【解决方案1】：

使用Expanded 小部件来抵抗视图溢出

Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  CircleAvatar(
                    radius: 40.0,
                    backgroundImage: Image.network('https://i.stack.imgur.com/LJ30b.png', fit: BoxFit.cover,).image,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Expanded(child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Really biiiig drink name here',
                        style: TextStyle(
                            color: Colors.yellow,
                            fontSize: 28
                        ),
                      ),
                      Text(
                        'Category goes here',
                        style: TextStyle(
                            color: Colors.red.withOpacity(.8)
                        ),
                      ),
                    ],
                  ), ),

                ],
              ),

【讨论】：

接受这个，每个答案都说同样的话。谢谢。

【解决方案2】：

将Expanded 添加到您的内部列中，为其指定宽度。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    CircleAvatar(
      radius: 40.0,
      backgroundImage: Image.network(
        '$thumbnail',
        fit: BoxFit.cover,
      ).image,
    ),
    SizedBox(
      width: 20,
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Really biiiig drink name here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28
            ),
          ),
          Text(
            'Category goes here',
            style: TextStyle(
              color: Colors.white.withOpacity(.8)
            ),
          ),
        ],
      ),
    ),
  ],
);

【讨论】：

【解决方案3】：

如果您在发生溢出的位置添加扩展，它应该可以解决问题。

【讨论】：