flutter - 是否有一个适合上下文波动大小的容器？

Question

我想知道是否有人可以帮助我找出如何使聊天框基于文本进行响应的方法。如下图所示。
How the chat bubbles are supposed to look
下面是尝试使聊天气泡的代码。我不介意更改窗口小部件类型以实现适合文本大小的容器。我只是不想破坏设计。如果需要，我还可以在评论中包括其他尝试!我在这里先向您的帮助表示感谢。

   return Container(
     child: Padding(
             padding: EdgeInsets.only(left:5), 
            child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
             padding: const EdgeInsets.only(left:10),
             child: new CircleAvatar(
               radius: (17.5),
               backgroundImage: AssetImage(
                                      user.profilePic,),
             ),
           ), 
         SizedBox(width: 10,),
         Container(
           width: MediaQuery.of(context).size.width,
           constraints: BoxConstraints(//minWidth:125,
           maxWidth: 290, //275
           ),
          
           child:Material(
           //color:Color(0x00000000) ,  TRANSPARENT
           color:const Color(0xf2ffffff),///Color(0xe6ffffff)  // ! REVISIT Change color of boxes??? 
           borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(16.0),
                                    bottomRight: Radius.circular(16.0),
                                    bottomLeft: Radius.circular(16.0),
                                  ),
         child: Padding(
           padding: const EdgeInsets.only(left:10.0), //Revisit
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 5,),
                          Row(
                             children: [
                               Text(user.name,       ///0xd9343f4b
                                                style: TextStyle(
                                                    fontFamily: 'Lato',
                                                  fontSize: (13/8.12)*SizeConfig.textMultiplier,
                                                  color: const Color(0xd9343f4b),
                                                  fontWeight: FontWeight.w700,
                                                ),
                                              textAlign: TextAlign.left,),
                              SizedBox(width:8),
                              Text(message.time, 
                                style: TextStyle(
                                        fontFamily: 'Lato',
                                        fontSize: 10,
                                        color: const Color(0xd9343f4b),
                                      ),
                                      textAlign: TextAlign.left,
                                      ),
                             ],
                           ),
                                SizedBox(height: 5,),
                                Container(
                                  
                                  margin: EdgeInsets.only( right:10,),
                                  child: Text(message.text, 
                                  style: TextStyle(
                                          fontFamily: 'Lato',   
                                          fontSize: 13,
                                          color: const Color(0xd9343f4b),
                                         
                                        ),
                                        textAlign: TextAlign.left,
                                        ),
                                ),

                       //SizedBox(height: 10,),//if(message.imageUrl!='') {
                      SizedBox(height: 10,),
                      _isPhoto(message),
                       
                      //},
                      
                      //}
                        ],
           ),
         ),
         ),
         ),
         
         ],

       ),
     ) 
   );
   
   
                    
 }  ```

Answer 1

您正处于实现设计的正确轨道上，唯一的问题是，聊天气泡中的列的高度没有限制，这就是为什么它似乎不适合其内容大小的原因。要解决此问题，只需通过传递mainAxisSize告诉Column适合其子级即可。

child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [],
),

根据有关主轴尺寸的文档

How much space should be occupied in the main axis.

During a flex layout, available space along the main axis is allocated to children. After allocating space, there might be some remaining free space. This value controls whether to maximize or minimize the amount of free space, subject to the incoming layout constraints.

这意味着在布置其子项时，此属性确定为其主轴上的子项提供多少空间(垂直为列)，并且默认为无限制的垂直空间(根据Column的文档)

Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded vertical constraints

A working sample of the solution can be found here on codepen
我还稍微更改了代码，以在某些地方用填充替换SizedBox(请注意，我必须替换函数调用和变量，因为您的代码没有其实现)。笔的样本输出为

编辑
完成上述更改后，您将注意到气泡占用的宽度超出了其所需的宽度，要解决此问题，您需要了解两点。
首先，您要指定您的容器应采用MediaQuery width: MediaQuery.of(context).size.width,的宽度，以便删除行。添加问题中提供的minWidth后，您会注意到容器始终尝试将midWidth用作其宽度。
这是因为默认情况下，行具有无限制的宽度(double.INFINITY)，因此您的容器会尝试以其最大可能宽度进行布局(即根据您的问题为290)。要解决此问题，您需要做的是在显示用户名的行中添加 mainAxisSize。

child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [

这样可以确保容器始终采用其子代的宽度，并且永远不会超过290的宽度。注意:如果子代超过290的固定值，则布局将溢出，建议您使用Wrap小部件。
我已经更新了笔的宽度变化，因此您可以在那里使用它。