我将列表视图作为
ExpansionPanel
当列表视图元素增加时,child显示如下错误:
Launching lib/main.dart on iPod touch (7th generation) in debug mode...
Running Xcode build...
Xcode build done. 14.8s
Debug service listening on ws://127.0.0.1:63754/UQLxQBvquj8=/ws
Syncing files to device iPod touch (7th generation)...
======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 390 pixels on the bottom.
The relevant error-causing widget was:
Column Column:file:///Users/untitled/lib/main.dart:46:15
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#62cb3 relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=320.0, 0.0<=h<=568.0)
... size: Size(320.0, 568.0)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤â¢â¤
====================================================================================================
为什么列表视图没有自动滚动?我应该如何处理溢出问题?这是最小的复制代码:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget buildNewTasks(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
return Text(index.toString());
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
if (index == 1) {}
},
children: [
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return ListTile(
title: Text("Todo"),
);
},
body: buildNewTasks(context),
isExpanded: true,
canTapOnHeader: true),
],
)
],
));
}
}