flutter - 如何根据内部文本动态更改容器大小？

Question

我正在显示一个动画容器列表，该列表最初具有一定的 maxLines 文本。当用户单击容器时，我希望容器展开以完全适合整个文本

这是我的简化代码：

AnimatedContainer(
                         height: containerHeight,
                         curve: Curves.easeOut,
                         duration: Duration(milliseconds: 400),
                         child: Column(
                                   mainAxisAlignment: MainAxisAlignment.center,
                                   crossAxisAlignment: CrossAxisAlignment.start,
                                   children: [
                                     Text(searchBooksList[index].title),
                                     Text('By ${searchBooksList[index].author}'),
                                     Expanded(
                                         child: Text(
                                           '\n${searchBooksList[index].description}',
                                           overflow: TextOverflow.ellipsis,
                                           maxLines: searchBooksList[index].expanded ? 50 : 7,
                                         )
                                     ),
                                   ],
                         ),
                       )

当用户点击容器时：

onTap: () {
            setState(() {
            searchBooksList[index].expanded = !searchBooksList[index].expanded;

            });
          },

目前，我根据文本的长度明确提到了容器的高度

double len;
                 if(searchBooksList[index].description.length <= 500)
                   len=0.3;
                 else if (searchBooksList[index].description.length > 500 && searchBooksList[index].description.length<=750)
                   len = 0.6;
                 else if(searchBooksList[index].description.length > 750 && searchBooksList[index].description.length<=1000)
                   len=0.66;
                 else if(searchBooksList[index].description.length > 1000 && searchBooksList[index].description.length<=1500)
                   len=1.0;
                 else if(searchBooksList[index].description.length>=1500)
                   len=1.2;
                 double containerHeight = searchBooksList[index].expanded ? 1000 * len
                     : 1000 * 0.25;

这是现在发生的事情：

但这会在某些文本的末尾留下空行。有没有更好的方法来适应文本而不调整文本大小？

Answer 1

编辑：

SingleChildScrollView(
        child: Container(child: Column(children: [
          ExpansionPanelList(
            animationDuration: Duration(seconds: 1),
            dividerColor: Colors.white,
            children: [
              ExpansionPanel(
                  backgroundColor: Colors.grey[800],
                  canTapOnHeader: true,
                  headerBuilder: (context, isExpanded) {
                    if (isExpanded){
                      return Row(
                        children: [
                        Image.asset('assets/1.png',height: 100,width: 100,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('Title',style: TextStyle(color: Colors.white),),
                            Text('By J. K. Rowling',style: TextStyle(color: Colors.white),),
                            Text(longtext, overflow: TextOverflow.ellipsis, maxLines: _isopen[0] ? 50 : 7,style: TextStyle(color: Colors.white),),
                            SizedBox(height: 10,),
                            Text('Size:0.2Mb',style: TextStyle(color: Colors.white),),
                            Text('Genre:Fantasy Fiction',style: TextStyle(color: Colors.white),),
                          ],),
                      ],);
                    }else{
                      return Row(children: [
                        Image.asset('assets/1.png',height: 100,width: 100,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('Title',style: TextStyle(color: Colors.white),),
                            Text('By J. K. Rowling',style: TextStyle(color: Colors.white),),
                            Text(longtext, overflow: TextOverflow.ellipsis, maxLines: _isopen[0] ? 50 : 7,style: TextStyle(color: Colors.white),),
                            SizedBox(height: 10,),
                            Text('Size:0.2Mb',style: TextStyle(color: Colors.white),),
                            Text('Genre:Fantasy Fiction',style: TextStyle(color: Colors.white),),
                          ],),
                      ],);
                    }
                  }, body: Text(""),isExpanded: _isopen[0]),
            ],
            expansionCallback: (panelIndex, isExpanded) => setState((){
              _isopen[panelIndex]= !isExpanded;
            }),
          ),
        ],),),

      ),

输出

---

此代码在展开文本时完全适合容器。

 Container(
        child: Column(
          children: [
            Row(children: [
              Image.asset('assets/1.png',height: 150,width: 150,),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AnimatedContainer(
                      curve: Curves.easeOut,
                      height: (expanded)?(MediaQuery.of(context).size.height*0.45):200,
                      duration: Duration(milliseconds: 400),
                      child: InkWell(
                        onTap: (){
                          setState(() {
                            expanded?expanded=false:expanded=true;
                          });
                        },
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('searchBooksList[index].title'),
                            Text('By ${'searchBooksList[index].author'}'),
                            Text('\n${longtext}', overflow: TextOverflow.ellipsis, maxLines: expanded ? 50 : 7,
                            ),
                            SizedBox(height: 10,),
                            Text("Size:0.2Mb"),
                            Text("Genre:Adventure"),
                          ],
                        ),
                      ),
                    ),

                  ],
                ),
              ),
    ],),

          ],
        ))

动图

免责声明：扩展时会产生RenderFlex overflowed错误

Answer 2

不要为容器提供高度，只需将容器放在 Expanded 小部件中，例如：

Expanded(
    child: container(
        child: Text(
            "Put your Text Here",
        )
    )
)