ShrinkWrap Horizontal ListView inside Column with 'mainAxisSize: MainAxisSize.min' gives error : 'constraints.hasBoundedHeight': is not true

Question

我正在尝试显示一个水平的 ListView，其高度由其 children 在列内给出，该列的高度也是其 children。

但是，我收到以下错误：'constraints.hasBoundedHeight'：不正确。

这是重现错误的简单片段：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

main() => runApp(MaterialApp(
      home: Scaffold(
        body: MyApp(),
      ),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text('Vertical1'),
        ListView(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          children: <Widget>[
            Container(
              height: 100,
              width: 100,
              child: Text('Horizontal1'),
              color: Colors.red,
            ),
          ],
        ),
        Text('Vertical2')
      ],
    );
  }
}

如您所见，children 有一个定义的高度，所以我不明白这个问题。

这是预期的输出：

我知道我可以使用 SingleChildScrollView，但只是想了解为什么它不适用于 ListView。

Answer 1

仅仅因为您的 child 有尺寸并不意味着 ListView 会采用该尺寸。你需要给你的 ListView 一个高度，因为默认情况下它的高度是无限的。

您收到此错误是因为您不能在列中放置无限高度，所以如果你想让你的列表包含所有可用的space，你可以用小部件Expanded给它一个高度。

这是一个例子：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Container(color: Colors.red, child: Text('Vertical1')),
            ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: 100,
              ),
              child: Container(
                color: Colors.green,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  children: <Widget>[
                    Container(
                      height: 100,
                      width: 100,
                      child: Text('Horizontal1'),
                    ),
                  ],
                ),
              ),
            ),
            Container(color: Colors.red, child: Text('Vertical2'))
          ],
        ),
      ),
    );
  }
}

ShrinkWrap Horizontal ListView inside Column with 'mainAxisSize: MainAxisSize.min' gives error : 'constraints.hasBoundedHeight': is not true

ShrinkWrap Horizontal ListView inside Column with 'mainAxisSize: MainAxisSize.min' gives error : 'constraints.hasBoundedHeight': is not true

flutter

dart

flutter-layout

flutter-listview