Question

如何在颤抖中获得像评论ROW这样的instagram？

使用：

              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中每一行的用户界面，

将其设置为userAvatar，然后是用户名，然后是注释，该注释将在下一行以下（在下面强调）用户名继续，然后在下一行显示时间和喜好

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

将文本小部件包装在一起

2 个答案: