Flutter ListView.builder触发RenderFlex溢出 末尾列表项被截断

在Flutter开发中实现垂直列表视图时，代码可正常编译运行，但最后一个列表项存在被截断的问题。尝试调整Expanded、Flexible组件的使用方式后问题未改善，初步判断为列表无法正常滚动导致内容溢出裁切。
原有实现代码如下：

class PostListsWidget extends StatefulWidget {
  const PostListsWidget({Key? key}) : super(key: key);

  @override
  _PostListsWidget createState() => _PostListsWidget();

}

class _PostListsWidget extends State<PostListsWidget> {
  static const List<PostListModel> _latestPosts = [
    PostListModel(post: 'this is a test as.', votes: 453, like: 1, iconID: 0xe908),
    PostListModel(post: 'this is a test as', votes: 2, like: 2, iconID: 0xe904),
    PostListModel(post: 'this is a test a', votes: 324, like: 1, iconID: 0xe908),
    PostListModel(post: 'this is a test s', votes: 435, like: 3, iconID: 0xe90d),
  ];

  Widget _buildListItem(BuildContext context, PostListModel postList){
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.white,   
        borderRadius: BorderRadius.circular(8)
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
         Flexible( 
        
          child: Container(   
          padding: EdgeInsets.only(bottom: 10),  
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children:  <Widget> [
                PentEmotionWidget(iconid:  postList.iconID),
                Expanded(child:   Text(
                    postList.post, 
                    overflow: TextOverflow.clip,
                  )    )
              
              ],
            )  ,
          )
         ),
          Flexible(
         
            child: Container(
              child: Row(
              
                children:  <Widget> [         
                 Expanded(child: 
                   PentLikesCountWidget(votes: postList.votes),
                 ),
                  PentLikesActionWidget(like: postList.like)       
                ],
                ),
            )
          )
          
        ],
     ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _latestPosts.length,
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemBuilder: (context, index) => 
        _buildListItem(context, _latestPosts[index]),   
      );
  }
}

异常效果参考：

最后一个列表项被截断并非列表无法滚动导致，是两个布局问题叠加造成的：

• 列表项的Column中无意义嵌套了Flexible组件，干扰了Column内部的高度计算逻辑，导致列表项实际渲染高度和ListView预计算的高度存在偏差
• ListView开启shrinkWrap: true时，默认不会自动适配设备底部安全区，最后一个列表项的位置刚好落在屏幕底部系统UI（导航栏、手势操作条）的覆盖区域，最终呈现被裁切的效果

按照以下步骤调整即可解决问题：

• 移除列表项Column中两个包裹子Container的Flexible组件。当前列表项都是固定短内容，Column已经设置mainAxisSize: MainAxisSize.min，会自动适配子内容高度，多余的Flexible嵌套只会打乱布局计算逻辑。
• 给ListView增加底部内边距适配安全区。给ListView的padding属性赋值EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom + 20)，既可以避开底部系统UI的遮挡，也能和列表项20px的外边距保持视觉间距一致。
• 如果ListView外层没有嵌套其他可滚动组件（如其他ListView、CustomScrollView），直接删除shrinkWrap: true配置。该属性会让ListView一次性计算所有子项的总高度，不仅性能差，还容易引发布局边界计算错误，独立使用的垂直列表不需要开启该配置。

修改后的核心代码参考：

Widget _buildListItem(BuildContext context, PostListModel postList){
  return Container(
    margin: const EdgeInsets.all(20),
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.white,   
      borderRadius: BorderRadius.circular(8)
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 移除多余的Flexible包裹
        Container(   
          padding: EdgeInsets.only(bottom: 10),  
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children:  <Widget> [
              PentEmotionWidget(iconid:  postList.iconID),
              Expanded(child: Text(
                  postList.post, 
                  overflow: TextOverflow.clip,
                )
              )
            ],
          ),
        ),
        // 移除多余的Flexible包裹
        Container(
          child: Row(
            children:  <Widget> [         
              Expanded(
                child: PentLikesCountWidget(votes: postList.votes),
              ),
              PentLikesActionWidget(like: postList.like)       
            ],
          ),
        )
      ],
    ),
  );
}

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: _latestPosts.length,
    scrollDirection: Axis.vertical,
    // 无外层滚动组件嵌套时可移除shrinkWrap配置
    // shrinkWrap: true,
    // 增加底部内边距适配安全区
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom + 20),
    itemBuilder: (context, index) => 
      _buildListItem(context, _latestPosts[index]),   
  );
}

内容的提问来源于stack exchange，提问作者mr_j