溢出的注释文本不对齐答案

【问题标题】：Overflowing comment text not in alignment溢出的注释文本不对齐
【发布时间】：2020-09-12 11:41:56
【问题描述】：

我想实现以下布局

有头像，后跟用户名，然后是评论。但是如果评论太长，它应该从用户名下方开始，而不是从头像。

以下是我的代码

Row(
                              children: [
                                const CircleAvatar(
                                  backgroundImage: NetworkImage(
                                      'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCA&usqp=CAU'),
                                  radius: 16,
                                ),
                                const SizedBox(
                                  width: 10,
                                ),
                                Text(
                                  'UserName',
                                  style: GoogleFonts.tenorSans(
                                      color: Colors.black),
                                ),
                                Text(
                                  'The Dram Club is a platform that endeavours to bring whisky enthusiassts & aficionados together for people to enjoy their whiskes',
                                  style: GoogleFonts.tenorSans(
                                      color: Colors.black,
                                      fontWeight: FontWeight.bold,
                                      fontStyle: FontStyle.italic),
                                )

                              ],
                            )

对于上面的代码，如果注释文本很大，则注释文本会被截断，因此我决定使用Row，而不是使用Wrap，但这会将我的输入注释移动到新行中。我只是尝试将用户名和评论文本包装在 Wrap 中，但没有任何反应。我也尝试使用 Flexible 和 Expanded 小部件

【问题讨论】：

你能添加你的屏幕截图吗？

标签： flutter dart

【解决方案1】：

您可以使用此代码。

Row(
      children: [
        const CircleAvatar(
          backgroundImage: NetworkImage(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCA&usqp=CAU'),
          radius: 16,
        ),
        const SizedBox(
          width: 10,
        ),

        Flexible(
          child: RichText(
            text: TextSpan(
              children: <TextSpan>[
                TextSpan(text: 'Username ', style: TextStyle(fontSize: 18, color: Colors.black)),
                TextSpan(text: 'The Dram Club is a platform that endeavours to bring whisky enthusiassts & aficionados together for people to enjoy their whiskes', style: TextStyle( color: Colors.black, fontSize: 16)),
              ],
            ),
          ),
        )

      ],
    ),

【讨论】：

【解决方案2】：

使用RichText class，在这里你可以添加多个不同样式的文本。所以这个想法是

拥有一个文本，具有不同的样式，一个用于UserName，另一个用于Comment

children: [
   CircleAvatar(
     backgroundImage: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCA&usqp=CAU'),
     radius: 16,
   ),
   SizedBox(
      width: 10,
   ),
   // here for User name and Comment
   RichText(
      text: TextSpan(
        text: 'UserName ',  // <-- Username text
        style: GoogleFonts.tenorSans(color: Colors.black),  // <-- User name style
        children: <TextSpan>[
          // your comment code
          TextSpan(text: 'The Dram Club is a platform that endeavours to bring whisky enthusiassts & aficionados together for people to enjoy their whiskes', 
            style: GoogleFonts.tenorSans(color: Colors.black,fontWeight: FontWeight.bold, fontStyle: FontStyle.italic)))
        ]
      )  
   )
]

【讨论】：