Flutter语言 - ListView not scrolling



在我的HomeView中,我使用BottomNavyBar,所以我的脚手架主体是一个返回两个页面中任意一个的函数。

提要页面是一个带有Future Builder的有状态小部件,它返回一个ListView Builder,如下所示:

Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
color: Colors.black12,
margin: EdgeInsets.all(0),
padding: EdgeInsets.only(top: 9),
child: Column(
children: [
FutureBuilder(
future: postNotifier(false).fetchPosts(context: context),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else {
var _snapshot = snapshot.data as List;
return ListOfPosts(snapshot: _snapshot);
}
}),
],
),
),
);
}
class ListOfPosts extends StatelessWidget {
final dynamic snapshot;
const ListOfPosts({Key? key, required this.snapshot}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: snapshot.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
PostData postData = snapshot[index];
return
FeedPostTile(data: postData);
},
);
}
}

我使用的Widget而不是ListTile作为帖子的模板是一个正在进行的工作。。。

Widget build(
BuildContext context,
) {
return Column(
children: [
Container(
margin: const EdgeInsets.only(top: 12),
color: Colors.white70,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
CircleAvatar(
radius: 18,
),
Container(
padding: EdgeInsets.only(left: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"", // ! post-creator profile name here
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
Text(
data.postTime.toString(), //! change to timeago
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.normal,
),
),
],
),
),
],
),
IconButton(
onPressed: () {}, // !! create options
icon: Icon(Icons.more_vert_rounded),
)
],
),
Text(
data.postText,
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
),
),
Container(
child: SizedBox(
height: 400,
)
// child: Image.network(), //! make carousel for multiple images
)
],
),
),
],
);
}

VS Code没有显示任何错误,但最终产品(应该是提要页面中帖子的可滚动列表(没有滚动。我只是在关注youtube视频和学习。我哪里错了?我不明白。

我查找了其他答案,发现使用多个/嵌套的支架并不理想,所以我在提要页面中删除了支架,但这并没有帮助。我读到的另一件事是,ListView可能在另一个可滚动的小部件中,但我不知道问题出在哪里。有更好的方法来构建代码吗?请帮忙。

解决方案

尝试将列用FeedPostTile包装在SizedBox中,并给出高度。

原因

列小部件采用其父级提供的最大可用高度。在这种情况下,它是一个ListView.Builder((,它没有高度约束。Container或SizedBox可以解决此问题。

最新更新