让容器适合上下文颤动的大小？

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.

这意味着在布置其子项时，此属性确定在主轴（列为垂直）中向其子项提供多少 space 并且默认为无界vertical space（根据 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小部件。

我也更新了笔的宽度变化，这样你就可以在那里玩了。

让容器适合上下文颤动的大小？

Having a container fit the size of the context flutter?

containers

media-queries

dart

flutter

responsive