将文本小部件相互包裹答案

【问题标题】：Wrapping Text widgets around each other将文本小部件相互包裹
【发布时间】：2018-08-12 18:33:08
【问题描述】：

我们如何在flutter中实现instagram之类的评论ROW？

与：

              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        new Icon(MdiIcons.accountCircle,
                            size: 40.0, color: Colors.black),
                        new SizedBox(width: 5.0),
                        new Text(
                          data[index].username,
                          style: new TextStyle(
                              fontSize: 15.0, fontWeight: FontWeight.w500),
                        ),
                        new SizedBox(
                          width: 5.0,
                        ),
                        new Flexible(
                            child: new Text(
                          "A really really really really realky long comment ${data[index].comment}"
                          style: new TextStyle(
                              fontSize: 15.0, fontWeight: FontWeight.w300),
                        )),
                      ],
                    ),
                    new Row(
                      children: <Widget>[
                        new SizedBox(
                          width: 45.0,
                        ),
                        new Text(
                          "1h ago",
                          style: new TextStyle(color: Colors.grey),
                        )
                      ],
                    ),
                    new Divider(
                      height: 2.0,
                    )
                  ],
                ),
              );

我做到了：

我想实现：

基本上如果我们打破 Instagram 中每一行的 UI，

它是一个userAvatar，后跟用户名，然后是评论，在下一行继续BELOW（强调在下面）用户名然后在下一行是时间和喜欢

【问题讨论】：

标签： widget flutter instagram

【解决方案1】：

您可以使用称为 RichText 的东西来获得这种效果

 new RichText(
      text: new TextSpan(
        children: <TextSpan>[
          new TextSpan(
            text: 'You don\'t have the votes.',
            style: new TextStyle(color: Colors.black,fontSize: 20.0),
          ),
          new TextSpan(
            text: 'You don\'t have the votes!',
            style: new TextStyle(color: Colors.red,fontSize: 30.0,),
          ),
        ],
      ),
    )

希望对你有所帮助！

【讨论】：

我们可以在这两个子文本跨度之间添加一个空格吗？

【解决方案2】：

对于那些需要准确答案的人

按照@Vns Aditya 的建议使用扩展

                        Expanded(
                          child: new RichText(
                            overflow: TextOverflow.fade,
                            text: new TextSpan(
                              children: <TextSpan>[
                                new TextSpan(
                                  text: data[index].username,
                                  style: new TextStyle(
                                      color: Colors.black,
                                      fontSize: 15.0,
                                      fontWeight: FontWeight.w500),
                                ),
                                new TextSpan(
                                    text: " ",
                                    style: new TextStyle(fontSize: 15.0)),
                                new TextSpan(
                                  text: "${data[index]
                                  .comment} asdasdasdalsdasuhdkuilagdugilsudfhaslkashdfasajdsfasd",
                                  style: new TextStyle(
                                      color: Colors.black,
                                      fontSize: 15.0,
                                      fontWeight: FontWeight.w300),
                                ),
                              ],
                            ),
                          ),
                        )

【讨论】：