widget - 将文本小部件相互环绕

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

希望对你有帮助!