将文本小部件相互环绕

Question

如何在flutter中实现instagram like comment 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（在下面强调）用户名，然后在下一行是时间和喜欢

Answer 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,),
          ),
        ],
      ),
    )

希望对你有帮助！

Answer 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),
                                ),
                              ],
                            ),
                          ),
                        )

将文本小部件相互环绕

Wrapping Text widgets around each other

widget

instagram

flutter