如何在 Flutter 中将多个小部件作为子部件传递？

Question

我最近开始学习 Flutter 并且一直在浏览文档。我正在开发这个小应用程序，它的屏幕顶部有一个按钮，下面有一个列表。

每当我将RaisedButton一个ListView小部件传递给另一个ListView或Column小部件时，它都会抛出错误。

I/flutter ( 4734): ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
I/flutter ( 4734): The following assertion was thrown during performResize():
I/flutter ( 4734): Vertical viewport was given unbounded height.
I/flutter ( 4734): Viewports expand in the scrolling direction to fill their container.
////MORE LINES OF ERRORS/////

这是我一直在研究的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(ListDemo(
    items: new List<ListItem>.generate(
      100,
          (i) => i % 6 == 0
          ? new HeadingItem("Heading $i")
          : new MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

// The base class for the different types of items the List can contain
abstract class ListItem {}

// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);
}

// A ListItem that contains data to display a message
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);
}

class ListDemo extends StatelessWidget {
  final List<ListItem> items;
  ListDemo({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final ListView listView = ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];

        if (item is HeadingItem) {
          return new ListTile(
            title: new Text(
              item.heading,
              style: Theme.of(context).textTheme.headline,
            ),
          );
        } else if (item is MessageItem) {
          return new ListTile(
            title: new Text(item.sender),
            subtitle: new Text(item.body),
          );
        }
      },
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lists'),
        ),
        body: ListView( //Tried using ListView, Column.. None of them help solving the issue
          children: <Widget>[
            RaisedButton(
              onPressed: null,
              child: Text('Sample Button'),
            ),
            Container(
              child: listView,
            )
        ]
      )
      )
    );
  }
}

请帮我解决这个让知道的问题，如何传递多个孩子，也请理解这个概念。

已编辑

一种可能的解决方案建议ListView用Expanded类包装。当我这样做时，它给我带来了如下错误：

I/flutter ( 4190): ??? EXCEPTION CAUGHT BY WIDGETS LIBRARY ????????????????????????????????????????????????????????????
I/flutter ( 4190): The following assertion was thrown building NotificationListener<KeepAliveNotification>:
I/flutter ( 4190): Incorrect use of ParentDataWidget.
I/flutter ( 4190): Expanded widgets must be placed inside Flex widgets.
I/flutter ( 4190): Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.

所以我将整个 Widget 代码包装Flex如下：

      Flex(
        direction: Axis.vertical,
        children: <Widget>[
          ListView(
            children: <Widget>[
              RaisedButton(
               onPressed: null,
               child: Text('Snackbar'),
              ),
              Expanded(
               child: listView
              )
             ],
            )
          ],
        )

但后来它给了我这个错误：

I/flutter ( 4388): ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
I/flutter ( 4388): The following assertion was thrown during performResize():
I/flutter ( 4388): Vertical viewport was given unbounded height.
I/flutter ( 4388): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 4388): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 4388): typically happens when a scrollable widget is nested inside another scrollable widget.

Answer 1

这个问题已经在这里得到解答

Flutter中无法添加ListView

如果您使用 a scrollable view(Listview) inside another scrollable view，则inner scrollable view不知道how much height it should occupy。您可以使用小部件告诉内部可滚动视图应采用多少高度Expanded。