为什么我的 ListView.builder 不工作？似乎是布局的问题，但不明白为什么

Question

我有一个ListView，我用一个生成器初始化:

ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => ASScoreInfoWidget(
title: mockScores[index].description,
score: mockScores[index].score,
color: mockScores[index].color),
itemCount: mockScores.length,
),

这是Column小部件内部的子组件之一。

这些自定义小部件足够简单…

class ASScoreInfoWidget extends StatelessWidget {
final String title;
final int score;
final Color color;
ASScoreInfoWidget(
{required this.title, required this.score, required this.color});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
ASScoreWidget(
score,
color: color,
),
],
);
}
}

class ASScoreWidget extends StatelessWidget {
final int score;
double fontSize;
final Color color;
ASScoreWidget(this.score, {required this.color, this.fontSize = 12.0});
@override
Widget build(BuildContext context) {
return Column(
children: [
Card(
color: color,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(
"$score%",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
Text(
"Ally Score",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: fontSize),
)
],
);
}
}

现在，当我导航到显示ListView的页面时，什么也没有显示，我得到这个错误:

════════ Exception caught by scheduler library ═════════════════════════════════
Updated layout information required for RenderAnimatedOpacity#2d73e NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.
'package:flutter/src/rendering/object.dart':
Failed assertion: line 2653 pos 12: '!_needsLayout'
════════════════════════════════════════════════════════════════════════════════
[VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1930 pos 12: 'hasSize': RenderBox was not laid out: RenderPointerListener#964dd NEEDS-LAYOUT NEEDS-PAINT
#0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
#1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
#2      RenderBox.size (package:flutter/src/rendering/box.dart:1930:12)
#3      RenderProxyBoxWithHitTestBehavior.hitTest (package:flutter/src/rendering/proxy_box.dart:177:9)
#4      RenderBoxContainerDefaultsMixin.defaultHitTestChildren.<anonymous closure> (package:flutter/src/rendering/box.dart:2775:25)
#5      BoxHitTestResult.addWithPaintOffset (package:flutter/src/rendering/box.dart:787:31)
#6      RenderBoxContainerDefaultsMixin.defaultHitTestChildren (package:flutter/src/rendering/box.dart:2770:33)
#7      RenderCustomMultiChildLayoutBox.hitTestChildren (package:flutter/src/rendering/custom_layout.dart:414:12)
#8      Rend<…>

Answer 1

尝试flutter clean并再次运行，希望它将解决问题。

试着运行这个代码片段:

import 'package:flutter/material.dart';
class SergioBost extends StatefulWidget {
SergioBost({Key? key}) : super(key: key);
@override
_SergioBostState createState() => _SergioBostState();
}
class Item {
String title;
int score;
Color color;
Item({
required this.title,
required this.score,
required this.color,
});
}
class _SergioBostState extends State<SergioBost> {
List<Item> items = List.generate(
5,
(index) => Item(
title: "item $index",
score: index * 2,
color: index.isEven ? Colors.red : Colors.cyanAccent));
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) => ASScoreInfoWidget(
title: items[index].title,
score: items[index].score,
color: items[index].color,
)),
floatingActionButton: FloatingActionButton(
onPressed: () {
items.forEach((element) {
element.score += 6;
});
setState(() {});
},
),
);
}
}
class ASScoreInfoWidget extends StatelessWidget {
final String title;
final int score;
final Color color;
ASScoreInfoWidget(
{required this.title, required this.score, required this.color});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
ASScoreWidget(
score,
color: color,
),
],
);
}
}
class ASScoreWidget extends StatelessWidget {
final int score;
double fontSize;
final Color color;
ASScoreWidget(this.score, {required this.color, this.fontSize = 12.0});
@override
Widget build(BuildContext context) {
return Column(
children: [
Card(
color: color,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(
"$score%",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
Text(
"Ally Score",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: fontSize),
)
],
);
}
}

Answer 2

你必须通过Axis。

否则，如果要水平滚动，则必须将列构造为行。

ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) => ASScoreInfoWidget(
title: mockScores[index].description,
score: mockScores[index].score,
color: mockScores[index].color),
itemCount: mockScores.length,
),