如何让Flutter中InViewNotifierList返回的Container具备自适应高度

解决方案 #

核心冲突是InViewNotifierList本质是封装的ListView，列表子项默认无高度约束，而你在Column中使用了Expanded组件，该组件会尝试占满父级剩余空间，父级高度不固定时就会出现布局异常，要么无内容渲染要么显示错乱。
按如下规则调整代码即可实现高度自适应：

• 移除外层Container的固定height属性
• 去掉Column下的所有Expanded包裹，文本组件直接放置即可自动适配内容长度
• 视频组件用AspectRatio包裹指定固定宽高比（比如常用的16:9），避免视频高度无限制
  调整后的参考代码：

class VideoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InViewNotifierList(
      scrollDirection: Axis.vertical,
      initialInViewIds: ['0'],
      isInViewPortCondition:
          (double deltaTop, double deltaBottom, double viewPortDimension) {
        return deltaTop < (0.5 * viewPortDimension) &&
            deltaBottom > (0.5 * viewPortDimension);
      },
      itemCount: 10,
      builder: (BuildContext context, int index) {
        return Container(
          width: double.infinity,
          padding: const EdgeInsets.all(16),
          child: InViewNotifierWidget(
            id: '$index',
            builder: (BuildContext context, bool isInView, Widget? child) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("Some long text from a database"),
                  const SizedBox(height: 8),
                  AspectRatio(
                    aspectRatio: 16 / 9,
                    child: VideoWidget(
                        play: isInView,
                        url: 'https://cdn.videvo.net/videvo_files/video/premium/video0392/large_watermarked/906_906-1044_preview.mp4'),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    height: 40,
                    child: Text("Button"),
                  )
                ],
              );
            },
          ),
        );
      },
    );
  }
}

如果需要对长文本做折叠处理，单独加文本折叠逻辑即可，不影响整体高度自适应的逻辑，InViewNotifierWidget本身不要求父级有固定高度，只要子项布局高度可计算就能正常工作。

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