dart - 强制 ListView 缩小以包含子项

Question

我能找到的最相似的问题是 'how to create a row of scrollable text boxes or widgets in flutter inside a ListView?' ，但是他们的解决方案只是为 ListView 的容器分配一个高度:

import 'package:flutter/material.dart';

// Define a 'main' function to run when our app starts
void main() {
  var app = new MaterialApp(
    home: new SafeArea(
      left: false,
      top: true,
      right: false,
      bottom: false,
      child: new Scaffold(
        body: new Container(
          color: Colors.green,
          height: 50.0,
          child: new ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              new Icon(Icons.check_circle, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.add, size: 50.0),
              new Icon(Icons.close, size: 50.0),
            ],
          ),
        ),
        appBar: AppBar(
          title: new Text("Hello")
        ),
      ),
    ),
  );

  runApp(app);
}

根据 Julien Louage ，除非添加子项，否则容器会扩展以填充其父项，在这种情况下，它将收缩以适应子项的尺寸。如果您要删除 Container 的高度属性，它将返回填充其父项，就好像它不包含子项一样。

合理的结论是 ListView 导致了问题； ListView 想要尽可能大，并且没有明显的方法来改变它。

像 Row 这样的其他小部件有缩小以包含子项的方法，但 ListView 没有？要查看此示例以及容器的大小调整约定，请删除一些图标以避免像素溢出并进行以下更改:

//height: 50.0,
child: new Row(
  crossAxisAlignment: CrossAxisAlignment.center,
//child: new ListView(
//  scrollDirection: Axis.horizontal,

那么如何让 ListView 缩小以包含子项(就像 Row 可以使用 CrossAxisAlignment.center)而不设置容器的高度？应该有办法的!

Answer 1

将listview包裹到一个容器中，并设置你想要的大小。