无法在标准ListView小部件上滚动；始终渲染150像素太多。

13 浏览
0 Comments

无法在标准ListView小部件上滚动；始终渲染150像素太多。

ListView根本不会滚动。错误显示问题在main.dart文件中而不在我正在工作的模块中，但是正是这个模块溢出了。

尝试了多种方法：

  • primary: false,

    physics: const AlwaysScrollableScrollPhysics(),

    controller: _controller

  • Flutter dev文档中的制作列表视图
  • Medium上的制作列表视图的帖子
  • 无数的堆栈溢出问题

以下是我的代码：

import 'package:flutter/material.dart';
class Listicle extends StatefulWidget {
  @override
  ListicleState createState() => ListicleState();
}
class ListicleState extends State {
  final List entries = ['A', 'B', 'C', 'D', 'E', 'F'];
  final List colorCodes = [600, 500, 100, 600, 500, 100];
  ScrollController _controller = new ScrollController();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        primary: false,
        physics: const AlwaysScrollableScrollPhysics(),
        controller: _controller,
        shrinkWrap: true,
        padding: const EdgeInsets.all(8),
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            color: Colors.amber[colorCodes[index]],
            child: Center(child: Text('Entry ${entries[index]}')),
          );
        }
      )
    );
  }
}

以下是错误信息：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 150 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///Users/christopher/AndroidStudioProjects/test_app/lib/main.dart:76: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#c9341 relayoutBoundary=up1 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 80.0); id=_ScaffoldSlot.body (can use size)
...  constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=679.3)
...  size: Size(392.7, 679.3)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

我刚刚开始接触flutter/dart（字面意思上是昨天）,这已经让我感到困惑了。

这是一个快照：https://i.stack.imgur.com/qlDMZ.png

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

错误发生是因为ListView在主轴方向上扩展到最大尺寸。

解决方案：

正如@rocigno-medeiros在评论中所指出的

通过将您的代码包装在Scaffold中使其工作，因为Scaffold限制了ListView的高度。

class Listicle extends StatefulWidget {
  @override
  ListicleState createState() => ListicleState();
}
class ListicleState extends State {
  final List entries = ['A', 'B', 'C', 'D', 'E', 'F'];
  final List colorCodes = [600, 500, 100, 600, 500, 100];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView.builder(
          primary: false,
          physics: AlwaysScrollableScrollPhysics(),
          shrinkWrap: true,
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 100,
              color: Colors.amber[colorCodes[index]],
              child: Center(child: Text('Entry ${entries[index]}')),
            );
          },
        ),
      ),
    );
  }
}

如果想要默认的滚动行为，也不需要额外的滚动控制器。

有关更多信息，请参见此处的很好的答案。

0
0 Comments

这个有效：

import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Listicle(),
        ),
      ),
    );
  }
}
class Listicle extends StatefulWidget {
  @override
  ListicleState createState() => ListicleState();
}
class ListicleState extends State {
  final List entries = ['A', 'B', 'C', 'D', 'E', 'F','G','H'];
  final List colorCodes = [600, 500, 100, 600, 500, 100,100,100];
 @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        primary: false,
        shrinkWrap: true,
        padding: const EdgeInsets.all(8),
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            color: Colors.amber[colorCodes[index]],
            child: Center(child: Text('Entry ${entries[index]}')),
          );
        }
      )
    );
  }
}

0