Flutter：扩展图块在纵向模式下工作正常，在横向模式下失败

Question

颤振： 我正在使用显示项目的扩展磁贴敌人，并且我已经包裹在一个列中，以在单击扩展磁贴时显示扩展磁贴中存在的所有列表，并且我在纵向和横向模式下都没有问题，但在横向模式下由于空间不足，它会抛出异常，因为空间不足。

我正在尝试在扩展磁贴中显示项目列表，它在纵向模式下工作，但是当模式更改为横向时，它会引发异常。 我在这里附上了我的代码。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text("Appbar"),
        ),
        body: MyApp())));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ExpansionTile(
          title: Text("Filters"),
          children: <Widget>[
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
          ],
        ),
        Expanded(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here"),
                  Text("test id here")
                ],
              )
            ],
          ),
        )
      ],
    );
  }
}```





I am looking for the contents should to be displayed in the listview inside the expansion tile and also it is coming properly in the portrait mode but it is failing in the landscape mode throwing following exception.

```I/flutter ( 5943): Another exception was thrown: Incorrect use of ParentDataWidget.
I/flutter ( 6076): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 6076): The following assertion was thrown building _BodyBuilder:
I/flutter ( 6076): Incorrect use of ParentDataWidget.
I/flutter ( 6076): Expanded widgets must be placed inside Flex widgets.
I/flutter ( 6076): Expanded(no depth, flex: 2, dirty) has no Flex ancestor at all.
I/flutter ( 6076): The ownership chain for the parent of the offending Expanded was:
I/flutter ( 6076):   _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
I/flutter ( 6076): AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#fdec2 ink
I/flutter ( 6076): renderer] ← NotificationListener<LayoutChangedNotification> ← PhysicalModel ← 

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 197 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///Users/praveenramalingam/news_feed_new/lib/pages/home_page.dart:129:13
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#0808f relayoutBoundary=up1 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 80.0); id=_ScaffoldSlot.body (can use size)
...  constraints: BoxConstraints(0.0<=w<=689.4, 0.0<=h<=331.4)
...  size: Size(689.4, 331.4)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by image resource service ════════════════════════════════════════════
Failed host lookup: 'cdn.mos.cms.futurecdn.net' (OS Error: No address associated with hostname, errno = 7)
════════════════════════════════════════════════════════════════════════════════════════════════════```


[![Landscape Mode- Exception][1]][1]


[![Portrait mode - No exception][2]][2]


  [1]: https://i.stack.imgur.com/JR7cI.png
  [2]: https://i.stack.imgur.com/DGLw4.png

Answer 1

这是因为 ExpansionTile 项目不可滚动。用SingleScrollChildView 包裹您的Column 小部件并删除Column 中的ListView，因为它将提供您需要的功能。

Widget build(BuildContext context) {
return SingleChildScrollView(
  child: Column(
    children: <Widget>[
      ExpansionTile(
        title: Text("Filters"),
        children: <Widget>[
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
          Text("Hello"),
        ],
      ),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here"),
      Text("test id here")        ],
  ),
);

}