如何在flutter中创建类似于css的文本换行img布局。

Question

我想让文本包裹热标签，我该怎么办？

• 类型1：不对齐

• 类型2：不是一行

• 类型3：非常接近，但是没有设置padding和margin，我没有找到一些lineHeight属性，等等。

 var Infomation = Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                color: Colors.redAccent,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                margin: EdgeInsets.only(right: 10),
                child: Text("hot", style: TextStyle(color: Colors.white, fontSize: 20)),
              ),
              Expanded(child: Text("Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life", textScaleFactor: 1.5, maxLines: 2, overflow: TextOverflow.ellipsis))
            ],
          ),
          Wrap(
            direction: Axis.horizontal,
            crossAxisAlignment: WrapCrossAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.redAccent,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                margin: EdgeInsets.only(right: 10),
                child: Text("hot", style: TextStyle(color: Colors.white, fontSize: 20)),
              ),
              Text("Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life", textScaleFactor: 1.5, maxLines: 2, overflow: TextOverflow.ellipsis)
            ],
          ),
          RichText(
              textAlign: TextAlign.start,
              text: TextSpan(
                  text: "hot",
                  style: TextStyle(color: Colors.white, backgroundColor: Colors.red, fontSize: 24) ,
                  children: [
                    TextSpan(
                        text: "Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life",
                      style: TextStyle(
                        color: Colors.black,
                        backgroundColor: Colors.white,
                        fontSize: 18,
                      )
                    )
                  ]
              ),
              maxLines: 2
          )
        ],
      );

Answer 1

屏幕截图位于此处https://i.stack.imgur.com/5MpHV.png

我似乎没有足够的声望来使用图片。