代码之家 › 专栏 › 技术社区 › Pushan Gupta

相互环绕文本小部件

instagram flutter widget

Pushan Gupta · 技术社区 · 6 年前

如何在flutter中实现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中破坏每一行的UI,

它是一个userAvatar,后面是username,后面是comment,在下一行继续下面 (强调以下)下一行的用户名是

2 回复 | 直到 6 年前

Vns Aditya 6 年前

你可以用一个叫做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,),
          ),
        ],
      ),
    )

希望对你有帮助!

Pushan Gupta 6 年前

使用@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),
                                ),
                              ],
                            ),
                          ),
                        )