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

Posted 2023-02-23

【中文标题】Flutter：扩展图块在纵向模式下工作正常，在横向模式下失败

【英文标题】：Flutter: Expansion tile Working fine in portrait and failing in landscape mode

【发布时间】：2020-05-15 06:23:46

【问题描述】：

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

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

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

【问题讨论】：

请尝试将您的代码示例减少到重现错误的最小大小。这将帮助其他人帮助你。

这能回答你的问题吗？ Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed

【参考方案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")        ],
  ),
);

【讨论】：

这个使扩展磁贴与下面的列内容一起滚动。我需要的是，我希望扩展磁贴内的内容可滚动，扩展磁贴下方的内容可滚动，用户可以能够从任何滚动位置看到展开图块

如何使扩展磁贴项目可滚动

据我所知，您不可能将ExpansionTile 粘贴在顶部并滚动项目。您将需要制作自己的小部件来尝试此操作。您可以在顶部粘贴ListTile，当您点击ListTile 时，您可以添加ListView。