flutter - Flutter，如何制作类似“Youtube Live Chat”的UI

Question

ID 首先出现，然后是一条消息。重要的一点是第二行的开头是从第一行ID开始的水平部分的地方。

如果你以完全相同的方式实现它，你会怎么做？

Row() 中的灵活文本小部件似乎不可能。

我会很感激回答谢谢

标签： flutterflutter-layoutflutter-animation

Answer 1

您可以使用带有各种参数的ListTile

例如：根据您的屏幕截图示例代码将是

ListTile(
    leading: CircleAvatar(
          backgroundImage: CachedNetworkImageProvider(userDisplayImage),
          //userDisplayImage would be URL
        ),
    title: Text(chatMessage),//Your Chat Message 
    trailing: Icon(Icons.more_vert),
    //If you want to add functionality (eg. option) you can simply replace with
    trailin: IconButton(
          onPressed: () => print("Option"),//Add functionality
          icon: Icon(Icons.more_vert),
        ),
  );

我希望这能解决你的问题