ios - Flutter:扩展图 block 在纵向模式下工作正常,在横向模式下失败

标签 ios swift flutter mobile dart

flutter : 我正在使用扩展图 block 敌人显示项目,并且我已将其包装在一列中,以在单击扩展图 block 时显示扩展图 block 中存在的所有列表,并且我在纵向和横向模式下都显示没有问题,但在横向模式下由于空间不足,它会抛出异常,因为空间不足。

我试图在扩展图 block 中显示项目列表,它在纵向模式下工作,但是当模式更改为横向时,它会抛出异常。 我已在此处附上我的代码。

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]: /image/JR7cI.png
  [2]: /image/DGLw4.png

最佳答案

这是因为 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")        ],
  ),
);

}

关于ios - Flutter:扩展图 block 在纵向模式下工作正常,在横向模式下失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59972435/

相关文章:

android - Flutter:无法加载 Assets 图像提供者:AssetImage(bundle:null,名称: "assets/images/rose.jpg")

ios - 在 iOS Swift 中执行 POST 请求

ios - 如何在基于大小类的通用 Storyboard中为 UItableview 模拟 2 个不同的行高?

ios - 如何在应用程序图标中显示通知计数?

iphone - iOS 记录器库

ios - 快速线程化多个任务?

javascript - iOS 设备的远程访问

flutter - 如何告诉 itemBuilder Flutter 中没有更多的项目?

flutter - 如何在 Flutter 页面加载时自动启动动画?

ios - 拍摄 UIImageView 的屏幕截图我只需要图像 IOS