我想让容器高度与此 ListView 内的行高度相匹配,这样我就可以为每张卡片提供一个很好的指示器。该列的长度是可变的,因此我无法设置特定的高度。如果我尝试使用 Expanded 小部件、IntrinsicHeight 小部件或“height: double.infinity”,我将收到渲染异常。
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Card(
child: Row(
children: [
Container(
width: 10,
//height: 50,
color: Colors.blue,
),
Column(
children: [
Text('A\nB\nC\nD'),
],
),
Column(
children: [
Text('$index'),
],
),
],
),
);
}),
);
}
}
您可以将整个
Row
包裹在 IntrinsicHeight
小部件中,如下所示:
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Card(
child: IntrinsicHeight(
child: Row(
children: [
Container(
width: 10,
color: Colors.blue,
),
const Column(
children: [
Text('A\nB\nC\nD'),
],
),
Column(
children: [
Text('$index'),
],
),
],
),
),
);
}),
);
}
并删除容器的高度,这将使容器占据卡片的完整高度。