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,
            )
        ]
      )
      )
    );
  }
}

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

EDITED

其中一个可能的解决方案建议用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

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

Can't add a ListView in Flutter

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

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

1 个答案: