Listview 使应用程序 Flutter 崩溃
Posted
技术标签:
【中文标题】Listview 使应用程序 Flutter 崩溃【英文标题】：Listview crash the application Flutter 【发布时间】：2020-08-17 22:44:32 【问题描述】：当我从列表视图小部件或应用程序中评论一行时，它可以工作，但是当我取消评论它时，它根本不会出现...
它是一个列表视图，用于呈现您通过 api 收到的通知列表，api 与未来的构建器正常工作，但是当我添加列表构建器时它停止工作......
代码
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:mais_mob/src/shared/models/notifications_model.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:transparent_image/transparent_image.dart';
class ProfilePage extends StatefulWidget
@override
_ProfilePageState createState() => _ProfilePageState();
class _ProfilePageState extends State<ProfilePage>
String _search;
int _page = 0;
Future<List<NotificationModel>> _getGifs() async
http.Response response;
response = await http.get(
"http://127.0.0.1:8001/api/v1/notifications/get/f331dfd0-cae4-410d-9700-b9ec72c48d7c");
List myModels;
myModels = (json.decode(response.body) as List)
.map((i) => NotificationModel.fromJson(i))
.toList();
return myModels;
@override
void initState()
// TODO: implement initState
super.initState();
@override
Widget build(BuildContext context)
return Scaffold(body: _future());
_future()
return FutureBuilder(
future: _getGifs(),
builder: (context, snapshot)
if (snapshot.hasData)
return SingleChildScrollView(
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 280.0,
decoration: BoxDecoration(
color: Color.fromRGBO(162, 56, 0, 1),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(30.0))),
),
Padding(
padding: const EdgeInsets.only(top: 60.0, left: 20.0),
child: InkWell(
onTap: ()
Navigator.of(context).pop();
,
child: Icon(
Icons.arrow_back,
color: Colors.white,
)),
),
Padding(
padding: const EdgeInsets.only(top: 150.0),
child: Center(
child: Container(
height: 200.0,
width: 310.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
BoxShadow(
color: Colors.black12.withOpacity(0.1)),
]),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/image/profile/profile3.jpg"),
fit: BoxFit.cover),
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
boxShadow: [
BoxShadow(
color: Colors.black12
.withOpacity(0.2),
blurRadius: 10.0,
spreadRadius: 2.0)
]),
),
),
SizedBox(
height: 5.0,
),
Text(
"user['name']",
style: TextStyle(
color: Colors.black,
fontFamily: "Sofia",
fontWeight: FontWeight.w700,
fontSize: 20.0),
),
Text(
"user['email']",
style: TextStyle(
color: Colors.black38,
fontFamily: "Sofia",
fontWeight: FontWeight.w300,
fontSize: 16.0),
),
],
),
),
),
)
],
),
Padding(
padding: const EdgeInsets.only(
left: 25.0, top: 40.0, bottom: 10.0),
child: Text(
"Notificações",
style: TextStyle(
fontFamily: "Sofia",
fontWeight: FontWeight.w700,
fontSize: 16.0),
),
),
// ListView.builder(
// itemCount: 1,
// itemBuilder: (context, index)
// return ListTile(
// title: Text(snapshot.data[index].id),
// subtitle: Text('x'),
// );
// ),
SizedBox(
height: 20.0,
)
],
),
);
else
return Center(
child: CircularProgressIndicator(),
);
);
日志终端
flutter: ══╡ 渲染库发现异常╞═══════════════════════════════════════ ═════════════════════ 颤振：在 performResize() 期间抛出了以下断言： 颤动：垂直视口被赋予了无限的高度。 颤动：视口在滚动方向上扩展以填充其容器。在这种情况下，垂直 颤振：视口被赋予了无限量的垂直空间来扩展。这个情况 颤动：通常发生在可滚动小部件嵌套在另一个可滚动小部件中时。 颤振：如果这个小部件总是嵌套在一个可滚动的小部件中，则不需要使用视口，因为 flutter：总会有足够的垂直空间供孩子们使用。在这种情况下，请考虑使用 Column 扑：相反。否则，请考虑使用“shrinkWrap”属性（或 ShrinkWrappingViewport）来调整大小 颤振：视口的高度与其子项的高度之和。 扑： 颤振：相关的导致错误的小部件是： 颤振：ListView file:///Users/lucas/www1/mais_mob/lib/src/pages/dashboard/profile.dart:149:28 扑： 颤振：抛出异常时，这是堆栈： 颤振：#0 RenderViewport.performResize。 （包：flutter/src/rendering/viewport.dart:1172:15） 颤振：#1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1233:6) 颤振：#2 RenderObject.layout（包：颤振/src/rendering/object.dart:1703:9） 颤振：#3 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#4 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#5 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#6 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#7 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） flutter: #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) 颤振：#9 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#10 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#11 RenderProxyBoxMixin.performLayout（包：颤振/src/rendering/proxy_box.dart:105:13） 颤振：#12 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：＃13 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#14 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#15 RenderFlex.performLayout（包：flutter/src/rendering/flex.dart:744:15） 颤振：#16 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#17 _RenderSingleChildViewport.performLayout（包：颤振/src/widgets/single_child_scroll_view.dart:497:13） 颤振：#18 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#19 RenderProxyBoxMixin.performLayout（包：颤振/src/rendering/proxy_box.dart:105:13） 颤振：#20 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：＃21 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#22 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：＃23 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#24 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#25 RenderProxyBoxMixin.performLayout（包：颤振/src/rendering/proxy_box.dart:105:13） 颤振：#26 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：＃27 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#28 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：＃29 RenderProxyBoxMixin.performLayout（包：flutter/src/rendering/proxy_box.dart:105:13） 颤振：#30 RenderObject.layout（包：颤振/src/rendering/object.dart:1724:7） 颤振：#31 MultiChildLayoutDelegate.layoutChild（包：flutter/src/rendering/custom_layout.dart:163:11） 颤振：#32 _ScaffoldLayout.performLayout（包：颤振/src/material/scaffold.dart:477:7） 颤振：#33 MultiChildLayoutDelegate._callPerformLayout（包：颤振/src/rendering/custom_layout.dart:232:7） 颤振：＃34 RenderCustomMultiChildLayoutBox.performLayout（包：flutter/src/rendering/custom_layout.dart:391:14） 颤振：#35 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1584:7) 颤振：#36 PipelineOwner.flushLayout（包：颤振/src/rendering/object.dart:844:18） 颤振：#37 RendererBinding.drawFrame（包：颤振/src/rendering/binding.dart:344:19） 颤振：#38 WidgetsBinding.drawFrame（包：flutter/src/widgets/binding.dart:774:13） 颤振：#39 RendererBinding._handlePersistentFrameCallback（包：颤振/src/rendering/binding.dart:283:5） 颤振：#40 SchedulerBinding._invokeFrameCallback（包：flutter/src/scheduler/binding.dart:1102:15） 颤振：#41 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1041:9) 颤振：#42 SchedulerBinding._handleDrawFrame（包：颤振/src/scheduler/binding.dart:957:5） 颤振：#46 _invoke (dart:ui/hooks.dart:259:10) 颤振：#47 _drawFrame (dart:ui/hooks.dart:217:3) 颤振：（从包 dart:async 中删除了 3 帧） 扑： 颤动：引发异常时正在处理以下 RenderObject：RenderViewport#7ca7e 需要-布局需要-油漆需要-合成-位-更新： 颤振：需要合成 颤振：创建者：视口 ← IgnorePointer-[GlobalKey#8349f] ← 语义 ← _PointerListener ← 侦听器 ← 颤振：_GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#91c65] ← 颤振：_PointerListener ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#fd66b] ← 可滚动 ← 颤动：⋯ 颤振：parentData：（可以使用大小） 颤振：约束：BoxConstraints(0.0 BouncingScrollPhysics，IdleScrollActivity#87e45， 颤振：ScrollDirection.idle） 颤振：锚：0.0 颤振：此 RenderObject 具有以下后代（显示深度为 5）： 颤振：中心孩子：RenderSliverPadding#68fac 需要 - 布局需要 - 油漆需要 - 合成 - 位更新 颤振：孩子：RenderSliverList＃0a754 NEEDS-LAYOUT NEEDS-PAINT 颤抖：═══════════════════════════════════════␕═══════════════ ══════════════════════════════════════════════════ ══ 颤振：引发了另一个异常：RenderBox 未布局：RenderViewport#7ca7e 需要-布局需要-绘制需要-合成-位-更新 颤振：引发了另一个异常：RenderBox 未布置：RenderViewport#7ca7e NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：RenderBox 未布置：RenderIgnorePointer#26c9e relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：RenderBox 未布置：RenderSemanticsAnnotations#4973c relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤动：引发另一个异常：未布置 RenderBox：RenderPointerListener#cdd75 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发了另一个异常：未布置 RenderBox：RenderSemanticsGestureHandler#b1e5a relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：未布置 RenderBox：RenderPointerListener#18a2b relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发了另一个异常：RenderBox 未布置：_RenderScrollSemantics#39c4e relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：RenderBox 未布置：RenderFlex#041d2 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发了另一个异常：未布置 RenderBox：_RenderSingleChildViewport#b5a7c relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：未布置 RenderBox：RenderIgnorePointer#9907c relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：未布置 RenderBox：RenderSemanticsAnnotations#9654a relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：RenderBox 未布置：RenderPointerListener#7ea85 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：未布置 RenderBox：RenderSemanticsGestureHandler#44215 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：RenderBox 未布置：RenderPointerListener#11392 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：RenderBox 未布置：_RenderScrollSemantics#c667c relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 颤振：引发另一个异常：未布置 RenderBox：_RenderSingleChildViewport#b5a7c relayoutBoundary=up7 NEEDS-PAINT 颤振：引发了另一个异常：NoSuchMethodError：在 null 上调用了 getter 'visible'。
【问题讨论】：
【参考方案1】：您收到错误是因为您没有给 ListView.builder 指定高度。
您可以通过将 ListView 包装在 Container 中并为 Container 提供 height 和 width 属性来解决它。
检查下面的代码，它运行良好：
Container(
// give it your desired height here
height: 500,
// give it your desired height here
width: MediaQuery.of(context).size.width,
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index)
return ListTile(
title: Text(snapshot.data[index].id),
subtitle: Text('x'),
);
,
),
);
我希望这会有所帮助。
【讨论】：
【参考方案2】：您没有提供引发此错误的原因的高度。要么按照@Random Guru 的建议将其包装在容器中，要么将其添加为Expanded 的子项。
Expanded(
child:ListView.Builder(...)
)
【讨论】：
谢谢回复，不过也没用，我放了展开也没用。【参考方案3】：当尝试将 Listview 或 ListView.builder 嵌套在 Column 中时，可能会发生这种情况。
您可以使用 Expanded 放置 Listview 或 ListView.builder。
Expanded(
child: ListView()
)
或
您可以使用 SizedBox 放置 Listview 或 ListView.builder 并将值设置为 SizedBox 的“高度”参数。高度是固定的。
SizedBox(
height: 150,
child: ListView()
)
或
您可以将 ListView 的 shrinkWrap 属性设置为 true。
ListView(
shrinkWrap: true
)
【讨论】：
【参考方案4】：这是因为列表视图的高度是无限的。如果添加收缩包装，它将需要足够的高度来显示列表。
如果不能解决问题，您可能也使用了 Flexible()
添加收缩包装=true
开启
Listview.builder(
....
shrinkWrap:true.
),
如果仍然无法解决，请将 Listview 或包含它的小部件（它是列的子级）包装到 Flexible 中。
Flexible(flex:1,child :list/widget containing list)
【讨论】：
感谢回复，但还是不行我试了2种方法以上是关于Listview 使应用程序 Flutter 崩溃的主要内容，如果未能解决你的问题，请参考以下文章
ListView 或 CustomScrollView 中的 Flutter WebView - 在 Android 上因高度而崩溃
如何使 Android 和 iOS 的 Flutter App 崩溃（以测试 Firebase Crashlytics）？
将大量数据插入 Flutter Hive 存储使应用程序崩溃