如何用容器包装ListView.builder的高度

Question

我有一个使用ListView.builder的屏幕。

我用Container给列表的背景一个浅色，并用BorderRadius.circular给它。就像这里。我想要这个背景来包装列表。就像这样。曲线必须位于列表的开头和末尾。

我尝试过：我给了ListView.builder一个physics: NeverScrollableScrollPhysics()。我用一个SingleChildScrollView包装了第一个Container。虽然背景在下面继续，但我必须给出一个高度。但我不知道这个清单会有多长。所以这个方法不起作用。

我错过了什么？

以下的完整代码

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
canvasColor: Colors.green,
primaryColor: Colors.green,
accentColor: Colors.white,
),
home: ListScreen(),
);
}
}
class ListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Colors.white38,
),
child: ListView.builder(
itemBuilder: (context, index) {
return Container(
child: Column(
children: [
InkWell(
onTap: () {},
child: Container(
height: MediaQuery.of(context).size.height / 7,
alignment: Alignment.center,
child: ListTile(
leading: Padding(
padding: const EdgeInsets.all(0),
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/330px-Ash_Tree_-_geograph.org.uk_-_590710.jpg",
fit: BoxFit.cover,
),
),
),
),
title: Text(
"${index + 1}. Tree",
),
),
),
),
Divider(
color: Colors.white,
height: 0,
),
],
),
);
},
itemCount: 12,
),
),
));
}
}

Answer 1

问题中尝试的方法是正确的。只需将shrinkWrap: true添加到ListView.builder()即可。

它看起来是这样的：

SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Colors.white38,
),
child: ListView.builder(
itemBuilder: (context, index) {
return Container(//builder);
},
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: list.length,
),
),
),

Answer 2

ListView小部件只是屏幕上的固定窗口，子小部件可以在其中滚动。为了达到所需的效果，您需要使用BorderRadius.only来取整ListView的第一个子项和最后一个子项的正确角。

Answer 3

此处的路径正确

我试过：我给ListView.builder提供了一个物理：NeverScrollableScrollPhysics((。我用SingleChildScrollView包装了第一个容器。虽然背景在下面继续，但我必须给出一个高度。但我不知道这个清单会有多长。所以这个方法不起作用。

除此之外，

这里缺少的是使用Expanded小部件使用扩展小部件让孩子可以随心所欲地扩展这个

Padding(
padding: const EdgeInsets.all(16),
child: Expanding(
child:Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Colors.white38,
),
child: ListView.builder(
// your ListView.builder code here with neverScrollablePhysics
),
),
))

记得把这一切都包装成singleChildScrollView()，也许也可以使用Column((