Flutter，如何制作类似“Youtube Live Chat”的UI答案

【问题标题】：Flutter, how to make UI like "Youtube Live Chat"Flutter，如何制作类似“Youtube Live Chat”的UI
【发布时间】：2021-06-11 18:29:24
【问题描述】：

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

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

Row() 中的灵活文本小部件似乎无法实现。

谢谢解答

【问题讨论】：

尝试使用 RichText 来连接多个文本小部件。
@Sahdeep Singh 我已经试过了，那是行不通的。如果下一个文本小部件对于一行来说太长，Flutter 会自动换行

标签： flutter flutter-layout flutter-animation

【解决方案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),
        ),
  );

希望这能解决您的问题

【讨论】：

谢谢，但我认为您误解了。我实际上不需要实现照片。我需要“两个文本小部件”。和“重要的是第二行的开头是从第一行ID开始的水平部分的地方。”
如果要添加两个文本，可以添加“字幕”。因此，您可以在单个 ListTile 中添加两个文本。如果我明白你的意思，请告诉我
如果添加“字幕”，您可以看到字幕在“标题”下方。我希望它是同一行老兄。我只希望它是“第一行”填满时的下一行

【解决方案2】：

您可以使用RichText 小部件

Container(
  padding: EdgeInsets.all(10),
  width: 200,
  color: Colors.black,
  child: RichText(
    text: TextSpan(
      text: 'aaaaaa',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
      children: <TextSpan>[
        TextSpan(
          text: ' bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.normal,
          ),
        )
      ],
    ),
  ),
)

显然，您可以使用两个变量将两个字符串传递给两个 TextSpan 小部件。这是你得到的输出

【讨论】：

不，用“aaaa”替换用户名，用“bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb”替换其他用户名，然后你可以看到 bbbb 在第二行
我刚刚尝试过，它似乎有效。检查更新的答案。也许你在第二行有 bbb，因为字符串太长，无法放在 aaa 之后的第一行，但它足够短，可以单独放在新的行上。我希望这是有道理的。尝试使用带有空格的实际单词，应该没问题。
你真的得到那个输出结果了吗？（编辑的答案）当我这样做时，你也能看到这个例子吗？ stackoverflow.com/questions/66621713/…
我没有真正得到我复制和粘贴的输出
正如我所说，“bbbb...”出现在第二行。