Flutter中IntrinsicWidth与ListView.builder兼容问题及报错咨询

我发现IntrinsicWidth可以正常和Column搭配，但和ListView.builder一起用就出问题。虽然用SingleChildScrollView包裹Column也能实现滚动，但还是想确认IntrinsicWidth到底支不支持ListView.builder。

代码示例 #

// IntrinsicWidth not working with ListView
import 'package:flutter/material.dart';

void main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('app'),backgroundColor: Colors.blue,),
      body: Center(
        child: IntrinsicWidth(
          child: ListView.builder(
            //physics: const NeverScrollableScrollPhysics(),
            itemCount: ls.length,
            itemBuilder: (context, index){
              return Center(
                child: Container(
                  color: Colors.yellow.shade200,
                  margin: const EdgeInsets.symmetric(vertical: 2),
                  child: Text(ls[index],style: const TextStyle(fontSize: 30)),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}
List<String> ls =[
  "John Doe",
  "Jane Smith",
  "Michael Johnson",
  "Emily Davis",
  "William Brown",
  "Olivia Taylor",
  "James Wilson",
  "Emma Jones",
  "Oliver Carter",
  "Ava Lee",
];

报错信息 #

运行后出现两个断言错误：

• performLayout时抛出断言：RenderViewport does not support returning intrinsic dimensions.
• performLayout时抛出断言：'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 345 pos 12: 'child!.hasSize': is not true.

原因与解决方案 #

根本原因 #

IntrinsicWidth的核心逻辑是先让子组件计算自身的固有宽度，再基于这个宽度完成布局。但ListView.builder对应的RenderViewport（滚动视图的渲染对象）不支持返回固有尺寸——因为ListView是可滚动组件，它的高度在无约束时可以无限延伸，无法提前确定自身的固有宽度，这直接触发了第一个断言错误。第二个错误是连锁反应：子组件（ListView）未算出有效尺寸，IntrinsicWidth无法完成布局，因此抛出child!.hasSize不成立的断言。

简单说：IntrinsicWidth不支持和ListView.builder直接配合使用。

替代方案 #

方案1：SingleChildScrollView + Column（适合少量列表项）

如果列表项数量不多，直接用SingleChildScrollView包裹Column，再套IntrinsicWidth即可实现需求，因为Column支持固有尺寸计算：

// 修改后的核心代码
body: Center(
  child: IntrinsicWidth(
    child: SingleChildScrollView(
      child: Column(
        children: ls.map((item) => Center(
          child: Container(
            color: Colors.yellow.shade200,
            margin: const EdgeInsets.symmetric(vertical: 2),
            child: Text(item, style: const TextStyle(fontSize: 30)),
          ),
        )).toList(),
      ),
    ),
  ),
),

方案2：预计算最大宽度（适合大量列表项）

如果列表项数量多，不想一次性创建所有子项（避免性能问题），可以提前计算所有列表项的最大宽度，然后给ListView.builder设置固定宽度：

1. 编写计算最大宽度的方法：

double calculateMaxWidth(BuildContext context) {
  final textStyle = const TextStyle(fontSize: 30);
  double maxWidth = 0;
  for (var text in ls) {
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: textStyle),
      textDirection: TextDirection.ltr,
    )..layout();
    if (textPainter.width > maxWidth) {
      maxWidth = textPainter.width;
    }
  }
  return maxWidth;
}

2. 在布局中使用该宽度：

@override
Widget build(BuildContext context) {
  final maxWidth = calculateMaxWidth(context);
  return Scaffold(
    appBar: AppBar(title: const Text('app'), backgroundColor: Colors.blue,),
    body: Center(
      child: SizedBox(
        width: maxWidth,
        child: ListView.builder(
          itemCount: ls.length,
          itemBuilder: (context, index){
            return Container(
              color: Colors.yellow.shade200,
              margin: const EdgeInsets.symmetric(vertical: 2),
              child: Text(ls[index], style: const TextStyle(fontSize: 30)),
            );
          },
        ),
      ),
    ),
  );
}

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