Flutter Listview 无法滚动且不显示所有列表
问题描述 投票：0回答：7
我刚刚开始使用颤振。就我而言，我想在主页上显示 10 个项目列表视图。但该列表视图仅显示 9 项。列表视图无法滚动以显示其他项目。你能看到我的代码有什么问题吗？
我一直在通过寻找具有相同标题但没有任何内容的主题来寻找此问题的解决方案。我更改了代码的一些行，但收到错误“bottom overlow by 240px”
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}
7个回答
6
投票
投票
尝试下面的代码它可以正常工作：
SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text(
"Powered By:",
style: new TextStyle(fontSize: 18.0),
),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child:
Image.network("https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale, color: Colors.greenAccent),
Text(
"Go Green!",
style: TextStyle(color: Colors.black87),
)
],
),
trailing: Icon(
Icons.keyboard_arrow_right,
color: Colors.black87,
size: 30.0,
),
),
),
);
},
)
],
),
),
您的结果屏幕：
3
投票
投票
将此属性添加到
Listivew.Builderphysics : NeverScrollableScrollPhysics()
因为它在里面
SingleChildScrollView0
投票
投票
将此行添加到您的代码中。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
physics : NeverScrollableScrollPhysics()
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}
0
投票
投票
删除 singleChildScrollview 并在 listview.builder 上添加展开的小部件。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
Expanded(
child : ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}
0
投票
投票
请尝试使用此代码 用此替换您的
bodyColumn(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child:
Text("Powered By:", style: new TextStyle(fontSize: 18.0)),
)
],
) ,
Expanded ( child : ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 13,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
}) )
]
)
0
投票
投票
我不相信所提供的任何解决方案都是正确的。他们都使用
shrinkWrap: trueclass HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: ListView.builder(
itemCount: 10 + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(
top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
);
}
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
}),
));
}
}
0
投票
投票
“用 SizedBox 替换 SingleChildScrollView 小部件就足够了。”
最新问题
- 是否有“函数修改按引用传递的参数”的 PHP 文档语法？
- df.replace() 无法替换数据框中的 nan 字符串
- 积分计算和颜色检查错误
- react-native-navigation：显示键盘时如何隐藏底部选项卡？
- 在 Visual Studio 中 Git 提交 vsidx 文件访问被拒绝
- Nuxt3 build .output 文件夹保持为空，没有从 .nuxt 复制任何内容
- 异常：在 Mac 上的 python 路径中找不到“点”
- 橡皮擦使画布完全变白
- 如何使用 gstreamer 作为 go2rtc 中流的外部源？
- 如何在移动设备上相对于浏览器按钮面板定位元素底部？
- Vscode 代码拼写检查器不适用于打字稿
- 使用 docker-compose 初始化 MariaDb
- 我如何知道 dsa_loop 和 dsa_loop_bdinfo Linux 内核模块何时工作？
- 最新的 kaboom 中 origin() 相当于什么？
- 需要 TRUE/FALSE 的缺失值：典型相关分析（cc CCA 包）
- 如果没有找到结果则返回null默认值
- 缩放画布元素并保持纵横比
- 无法从源解析导入[模块]PylancereportMissingModuleSource
- 如何使用Java创建虚拟IP地址
- 这个简单的for嵌套循环的逻辑是什么？
© www.soinside.com 2019 - 2024. All rights reserved.