显示嵌套列中的ListView

Question

我试图使用一个可滚动的ListView在我的应用程序，但我有一些困难。我使用嵌套的列和行设置了IU的结构，我想在屏幕的下半部分显示这个ListView的几个列。我发现，如果你在列中使用ListView你需要将其包装在展开的小部件中如果该列在另一个列中也需要将其包装在展开的小部件中

return Container(
child: Column(children: [
Container(
child: Expanded(
child: Column(children: [
Expanded(
child:
ListView(padding: const EdgeInsets.all(8), children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
]))
])))
]));
}

然而，如果我尝试向嵌套容器添加任何属性它会反复给我这个错误

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderColoredBox#bcf8d relayoutBoundary=up1
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

return Container(
child: Column(children: [
Container(
**color: Colors.white,**
**padding: EdgeInsets.all(2),**
child: Expanded(
child: Column(children: [
Expanded(
child:
ListView(padding: const EdgeInsets.all(8), children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
]))
])))
]));
}

谁能告诉我为什么?即使我只是改变颜色，也会出错。也许我应该使用另一个小部件?我需要能够样式的容器，它不像我可以这样，如果我想使用ListView。

实际代码如下:

class _ThisViewState extends State<ThisView> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
home: Scaffold(
appBar: AppBar(
title: Text("Title"),
centerTitle: true,
backgroundColor: Styles.primaryGreen),
body: Container(
color: Styles.backgroundColorLight,
child: Column(
children: [
customCard1(),
customCard2(),
],
))),
);
}
Widget customCard2() {
return Container(
width: double.infinity,
color: Colors.white,
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Padding(
padding:
const EdgeInsets.only(left: 24, right: 24, top: 28, bottom: 14),
child: Text(
"Subtitle",
style: TextStyle(
fontSize: Styles.textSizeSubheading,
fontWeight: FontWeight.bold,
),
),
),
InfoContainer()
]));
}
}
class _infoContainerState extends State<infoContainer> {

@override
void initState() {
super.initState();
}
@override
build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: Text(
DateFormat('EEEE, d MMMM y').format(DateTime.now()),
style: TextStyle(
fontSize: Styles.textSizeDefault,
fontWeight: FontWeight.w500,
),
),
),
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
],
);
}

[1]: https://i.stack.imgur.com/KKVIe.png

当ListView被shrinkwrapped

Answer 1

下面的代码将创建一个布局，其中屏幕的下半部分是ListView。为了使屏幕的更大一部分是ListView，您可以更改Expanded小部件的flex属性。(见文档)

Column(
children: [
Expanded(
child: Container(color: Colors.green),
),
Expanded(
child: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
],
)),
],
);