如何在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(强调在下面)用户名然后在下一行是时间和喜欢
最佳答案
您可以使用称为 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,),
),
],
),
)
希望对你有帮助!
关于widget - 将文本小部件相互环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51811717/