单独小部件中的列表生成器无法正常工作

Question

我尝试了 Flutter.io 的 listbuilder 演示。这很好用，但是我想将页面添加到文本视图中，因此我将列表生成器移动到一个单独的小部件中，这会引发以下错误：

发生异常。FlutterError（无法命中测试从未布局过的渲染框。在此 RenderBox 上调用了 hitTest() 方法：RenderStack#894cd NEEDS-LAYOUT NEEDS-PAINT 不幸的是，此时该对象的几何形状未知，可能是因为它从未被布局过。这意味着它不能被准确地进行命中测试。如果您尝试在布局阶段本身执行命中测试，请确保只命中已完成布局的测试节点（例如，该节点的子节点，在其子节点之后）已经调用了layout()方法）。）

完整代码：

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

void main() {
  runApp(MyApp(
    items: List<String>.generate(10, (i) => "Item $i"),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: body(),
      ),
    );
  }

  Widget body() {
    return Container(
        child: Column(children: <Widget>[
      ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${items[index]}'),
          );
        },
      )
    ]));
  }
}

Answer 1

尝试删除以下Column内容body()：

  Widget body() {
    return Container(
        child: /* Column(children: <Widget>[ */
      ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${items[index]}'),
          );
        },
      )
    /* ]) */);
  }

这是因为Column似乎没有特定的大小来渲染子窗口小部件。更多信息：https ://flutter.io/docs/development/ui/layout/box-constraints#flex

更新@2019.02.18：

要为列表添加同级，您可以尝试用 包裹它Expanded，然后添加同级。

  Widget body() {
    return Container(
      child: Column(children: <Widget>[
        Text('DropdownButton'),
        Expanded(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${items[index]}'),
              );
            },
          ),
        ),
      ])
    ),
  }