为什么这个 listview 在 flutter 中留下 space
why this listview leaving a space in flutter
MaterialApp(
home: Scaffold(
body: DefaultTabController(
length: 3,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
// GetTopRated();
return [
SliverAppBar(
elevation: 0,
backgroundColor: primaryColor,
expandedHeight: MediaQuery.of(context).size.height * .30,
stretch: true,
centerTitle: true,
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_outlined)),
flexibleSpace: FlexibleSpaceBar(
// background: Image.network(
// name,
// height: MediaQuery.of(context).size.height * .23,
// ),
centerTitle: true,
title: Text(widget.name),
),
),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(
TabBar(
labelColor: Colors.white,
labelStyle: TextStyle(fontSize: 18),
tabs: [
Tab(
text: "Table",
),
Tab(
text: "Played",
),
Tab(
text: "Upcoming",
),
],
),
primaryColor),
// pinned: true,
)
];
},
// body: upcomingMatches(),
body: TabBarView(children: [
// table(context, i),
// playedMatches(context),
// upcomingMatches()
FutureBuilder(
future: getData(widget.league_id),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
height: MediaQuery.of(context).size.height,
color: primaryColor,
child: Center(
child: CircularProgressIndicator(
color: Colors.white,
),
),
);
}
return SingleChildScrollView(
child: Container(
color: secondaryColor,
child: Column(
children: [
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Container(
width: MediaQuery.of(context).size.width * .43,
padding: EdgeInsets.symmetric(vertical: 6),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"PL",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"W",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"D",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"L",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"PTS",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
SizedBox(),
],
),
),
],
),
),
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
// color: secondaryColor,
padding: EdgeInsets.symmetric(vertical: 10),
child: Row(
// crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
print(snapshot.data[index].team_id);
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => TeamInfo(
context,
snapshot.data[index].team_id,
snapshot.data[index].team_badge,
snapshot.data[index].team_name),
),
);
},
child: Row(
children: [
Image.network(
snapshot.data[index].team_badge,
width: 35,
errorBuilder: (BuildContext context,
Object object,
StackTrace stackTrace) {
return Image.network(
snapshot.data[index].team_badge,
width: 30,
errorBuilder:
(BuildContext context,
Object object,
StackTrace stackTrace) {
return Image.network(
imageError,
width: 30,
);
},
);
},
),
SizedBox(
width: 10,
),
Container(
width: MediaQuery.of(context)
.size
.width *
.28,
child: Text(
snapshot.data[index].team_name,
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
Container(
width: MediaQuery.of(context).size.width *
.43,
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
snapshot.data[index]
.overall_league_payed,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_W,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_D,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_L,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_PTS,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
SizedBox(),
],
),
),
],
),
);
},
itemCount: snapshot.data.length,
),
],
),
),
);
},
),
// Container(
// child: Text("data"),
// ),
Container(
color: backgroundColor,
child: FutureBuilder(
future: getMatchesPlayed(widget.league_id),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
height: MediaQuery.of(context).size.height,
color: primaryColor,
child: Center(
child: CircularProgressIndicator(
color: Colors.white,
),
),
);
}
return ListView.builder( //there
itemCount: snapshot.data.length,
itemBuilder: (__, index) {
int itemCount = snapshot.data.length ?? 0;
int reversedIndex = itemCount - 1 - index;
return Card(
color: secondaryColor,
margin: EdgeInsets.all(10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
SizedBox(height:13),
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width:
MediaQuery.of(context).size.width *
0.391,
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Container(
width: MediaQuery.of(context)
.size
.width *
0.29,
child: Text(
snapshot.data[reversedIndex]
.match_hometeam_name,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.white,
fontSize: 17),
),
),
SizedBox(width: 5),
Image.network(
snapshot.data[reversedIndex]
.team_home_badge,
width: 35,
errorBuilder: (BuildContext,
Object, StackTrace) {
return Image.network(
imageError);
},
),
],
),
),
Container(
padding:
EdgeInsets.symmetric(horizontal: 7),
child: Row(
children: [
Text(snapshot.data[reversedIndex]
.match_hometeam_score+" - "+snapshot.data[reversedIndex].match_awayteam_score,style:TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w600,
),),
],
),
),
Container(
width:
MediaQuery.of(context).size.width *
0.391,
child: Row(
children: [
Image.network(
snapshot.data[reversedIndex]
.team_away_badge,
width: 35,
errorBuilder: (BuildContext,
Object, StackTrace) {
return Image.network(
imageError);
},
),
SizedBox(width: 5),
Container(
width: MediaQuery.of(context)
.size
.width *
0.29,
child: Text(
snapshot.data[reversedIndex]
.match_awayteam_name,
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.white,
fontSize: 17),
),
),
],
),
)
],
),
SizedBox(height: 4 ),
Container(
decoration: BoxDecoration(
color: Colors.grey[350],
borderRadius: BorderRadius.circular(11)
),
child: Text(
snapshot.data[reversedIndex].match_status,
style: TextStyle(color: Colors.black),
),
padding: EdgeInsets.symmetric(horizontal: 7,vertical: 2),
),
],
)),
);
},
);
},
),
),
Container(
child: Text("data"),
),
]),
),
),
),
debugShowCheckedModeBanner: false,
);
}
}
有一个 futurebuilder 可以从一个函数中获取数据，如下图所示，但是列表视图中有一个 space 我已经评论了我认为的错误是什么，我不知道有什么问题
enter image description here
ListView 小部件具有从顶部开始的默认填充。如果你想删除它，你应该传递你想要的大小的新填充。
例如
ListView.builder(
padding: EdgeInsets.zero /// Removes the padding from all sides.
...
);
或
ListView(
padding: EdgeInsets.zero
...
);
您还可以查看 here。
在 Android Studio 中打开 Flutter Performance 选项卡（您可以使用搜索按钮进行搜索），然后单击蓝色按钮（Show Debug Paint).因此，您将能够检查小部件的填充和边距。
MaterialApp(
home: Scaffold(
body: DefaultTabController(
length: 3,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
// GetTopRated();
return [
SliverAppBar(
elevation: 0,
backgroundColor: primaryColor,
expandedHeight: MediaQuery.of(context).size.height * .30,
stretch: true,
centerTitle: true,
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_outlined)),
flexibleSpace: FlexibleSpaceBar(
// background: Image.network(
// name,
// height: MediaQuery.of(context).size.height * .23,
// ),
centerTitle: true,
title: Text(widget.name),
),
),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(
TabBar(
labelColor: Colors.white,
labelStyle: TextStyle(fontSize: 18),
tabs: [
Tab(
text: "Table",
),
Tab(
text: "Played",
),
Tab(
text: "Upcoming",
),
],
),
primaryColor),
// pinned: true,
)
];
},
// body: upcomingMatches(),
body: TabBarView(children: [
// table(context, i),
// playedMatches(context),
// upcomingMatches()
FutureBuilder(
future: getData(widget.league_id),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
height: MediaQuery.of(context).size.height,
color: primaryColor,
child: Center(
child: CircularProgressIndicator(
color: Colors.white,
),
),
);
}
return SingleChildScrollView(
child: Container(
color: secondaryColor,
child: Column(
children: [
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Container(
width: MediaQuery.of(context).size.width * .43,
padding: EdgeInsets.symmetric(vertical: 6),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"PL",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"W",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"D",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"L",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
"PTS",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
SizedBox(),
],
),
),
],
),
),
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
// color: secondaryColor,
padding: EdgeInsets.symmetric(vertical: 10),
child: Row(
// crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
print(snapshot.data[index].team_id);
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => TeamInfo(
context,
snapshot.data[index].team_id,
snapshot.data[index].team_badge,
snapshot.data[index].team_name),
),
);
},
child: Row(
children: [
Image.network(
snapshot.data[index].team_badge,
width: 35,
errorBuilder: (BuildContext context,
Object object,
StackTrace stackTrace) {
return Image.network(
snapshot.data[index].team_badge,
width: 30,
errorBuilder:
(BuildContext context,
Object object,
StackTrace stackTrace) {
return Image.network(
imageError,
width: 30,
);
},
);
},
),
SizedBox(
width: 10,
),
Container(
width: MediaQuery.of(context)
.size
.width *
.28,
child: Text(
snapshot.data[index].team_name,
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
Container(
width: MediaQuery.of(context).size.width *
.43,
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
snapshot.data[index]
.overall_league_payed,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_W,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_D,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_L,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
snapshot
.data[index].overall_league_PTS,
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
SizedBox(),
],
),
),
],
),
);
},
itemCount: snapshot.data.length,
),
],
),
),
);
},
),
// Container(
// child: Text("data"),
// ),
Container(
color: backgroundColor,
child: FutureBuilder(
future: getMatchesPlayed(widget.league_id),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
height: MediaQuery.of(context).size.height,
color: primaryColor,
child: Center(
child: CircularProgressIndicator(
color: Colors.white,
),
),
);
}
return ListView.builder( //there
itemCount: snapshot.data.length,
itemBuilder: (__, index) {
int itemCount = snapshot.data.length ?? 0;
int reversedIndex = itemCount - 1 - index;
return Card(
color: secondaryColor,
margin: EdgeInsets.all(10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
SizedBox(height:13),
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width:
MediaQuery.of(context).size.width *
0.391,
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Container(
width: MediaQuery.of(context)
.size
.width *
0.29,
child: Text(
snapshot.data[reversedIndex]
.match_hometeam_name,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.white,
fontSize: 17),
),
),
SizedBox(width: 5),
Image.network(
snapshot.data[reversedIndex]
.team_home_badge,
width: 35,
errorBuilder: (BuildContext,
Object, StackTrace) {
return Image.network(
imageError);
},
),
],
),
),
Container(
padding:
EdgeInsets.symmetric(horizontal: 7),
child: Row(
children: [
Text(snapshot.data[reversedIndex]
.match_hometeam_score+" - "+snapshot.data[reversedIndex].match_awayteam_score,style:TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w600,
),),
],
),
),
Container(
width:
MediaQuery.of(context).size.width *
0.391,
child: Row(
children: [
Image.network(
snapshot.data[reversedIndex]
.team_away_badge,
width: 35,
errorBuilder: (BuildContext,
Object, StackTrace) {
return Image.network(
imageError);
},
),
SizedBox(width: 5),
Container(
width: MediaQuery.of(context)
.size
.width *
0.29,
child: Text(
snapshot.data[reversedIndex]
.match_awayteam_name,
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.white,
fontSize: 17),
),
),
],
),
)
],
),
SizedBox(height: 4 ),
Container(
decoration: BoxDecoration(
color: Colors.grey[350],
borderRadius: BorderRadius.circular(11)
),
child: Text(
snapshot.data[reversedIndex].match_status,
style: TextStyle(color: Colors.black),
),
padding: EdgeInsets.symmetric(horizontal: 7,vertical: 2),
),
],
)),
);
},
);
},
),
),
Container(
child: Text("data"),
),
]),
),
),
),
debugShowCheckedModeBanner: false,
);
} }
有一个 futurebuilder 可以从一个函数中获取数据，如下图所示，但是列表视图中有一个 space 我已经评论了我认为的错误是什么，我不知道有什么问题
enter image description here
ListView 小部件具有从顶部开始的默认填充。如果你想删除它，你应该传递你想要的大小的新填充。
例如
ListView.builder(
padding: EdgeInsets.zero /// Removes the padding from all sides.
...
);
或
ListView(
padding: EdgeInsets.zero
...
);
您还可以查看 here。
在 Android Studio 中打开 Flutter Performance 选项卡（您可以使用搜索按钮进行搜索），然后单击蓝色按钮（Show Debug Paint).因此，您将能够检查小部件的填充和边距。