Wrap 小部件的子级溢出时不在同一行答案

【问题标题】：Children of Wrap widget not in the same line when overflowingWrap 小部件的子级溢出时不在同一行
【发布时间】：2021-11-02 00:19:21
【问题描述】：

我正在使用 Wrap 小部件来解决我的溢出问题：

Wrap(
      children: [
        Text(subtitle, style: TextStyle(color: Color(COLOR_PRIMARY),fontSize: 12.5)),
        Image(
          image: AssetImage(
              drinkNameToImage[widget.post.cocktail] as String),
          width: 20,
          height: 20,
        )
      ],
    ),

当我的文本行没有溢出时，一切正常，看起来像这样

但是当行溢出时它看起来像这样：

我想把图片放在美国文本旁边，我该如何解决？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

在您的Wrap 小部件上，它有两个Text 和Image 小部件，并且基于wrap 自然它工作正常。因为当Text 小部件占用全宽时，它最终会转到下一行。

Text 小部件占用第一两行，因为它没有足够的空间，在 United States 文本之后，其余空间被 Text 小部件覆盖。您可以通过 widget-inspector 进行检查，或者简单地用 Container 小部件包装并提供颜色。

在您的情况下，您需要使用 RichText 而不是 Wrap。

 RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: subtitle,
                      style: TextStyle(
                          //color: Color(COLOR_PRIMARY),
                          fontSize: 12.5),
                    ),
                    WidgetSpan(
                        child: Image(
                      image: AssetImage(
                        drinkNameToImage[widget.post.cocktail] as String,
                      ),
                      width: 20,
                      height: 20,
                    ))
                  ],
                ),
              ),

查看以了解有关RichText的更多信息

【讨论】：