flutter - Flutter ListView 和 ListView.builder 问题
问题描述
我是颤振的初学者,我创建了一个显示播放器信息的小部件,我使用了 ListView 和 ListView.builder 但我有一个未知的错误说:断言失败:第 1785 行 pos 12:'hasSize'
我不知道这个错误的根源是什么,它只有在我添加 ListView 构建器时才开始,在我添加它之前一切正常
这是我尝试过的:
import 'package:flutter/material.dart';
import 'package:tl_fantasy/widgets/Player_Widget.dart';
import 'player_arguments.dart';
class PlayerDetails extends StatelessWidget {
@override
Widget build(BuildContext context) {
final PlayerArguments args = ModalRoute.of(context).settings.arguments;
List<Stats> stats = [
Stats("Matches", args.matches ),
Stats("Goals", args.goals ),
Stats("Assists", args.assists ),
Stats("Saves", args.saves ),
];
List<Team> teams = [
Team("Barcelona B", "https://i.pinimg.com/originals/ef/9c/3f/ef9c3fccec423f70376fcafa05c5d447.jpg","1998" ),
Team("Barcelona", "https://i.pinimg.com/originals/ef/9c/3f/ef9c3fccec423f70376fcafa05c5d447.jpg","2005" ),
];
return Scaffold(
appBar: AppBar(
title: Text("Player Details"),
backgroundColor: Colors.blue[300],
elevation: 0.0,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue])
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.purple, Colors.black38])),
child: ListView(
children: [
SizedBox(
height: 20,
),
Container(
width: double.infinity,
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(args.image),
),
const SizedBox(width:10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(args.name, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text(args.club, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text("Role : "+args.role, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
const SizedBox(height: 5.0, ),
Text("Position : "+args.club, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
const SizedBox(height: 5.0, ),
Text("Nationality : "+args.nationality, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
],
),
],
),
),
),
),
Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
shrinkWrap: true,
itemCount: stats.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index){
return Card(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Text(stats[index].result,style: TextStyle(fontSize: 20.0)),
),
Container(
alignment: Alignment.bottomCenter,
child: Text(stats[index].title,style: TextStyle(fontSize: 25.0)),),
]
),
),
);
},
)
),
SizedBox(
height: 30,
),
Container(child:
ListView.builder(
itemBuilder: (context, index){
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(teams[index].image),
),
const SizedBox(width:10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(teams[index].name, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text("joined : "+teams[index].date, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
],
),
],
),
),
);
},
itemCount: teams.length,
),),
],
),
),
),
);
}
}
class Stats{
String title;
String result;
Stats(this.title,this.result);
}
class Team {
String name;
String image;
String date;
Team(this.name,this.image,this.date);
}
添加 ListView.builder 后,我想知道发生了什么以及如何解决错误
解决方案
我认为你ListView.builder
无法弄清楚在哪里成长。ListView.builder'
s parentContainer
没有height
也没有width
指定。尝试像这样指定这些参数:
Container(
height: //your parameter,
width: //your parameter,
child:
ListView.builder(
itemBuilder: (context, index){
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(teams[index].image),
),
const SizedBox(width:10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(teams[index].name, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text("joined : "+teams[index].date, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
],
),
],
),
),
);
},
itemCount: teams.length,
),),
或者尝试用Column
内部Expanded
小部件包装它:
Column(
children: [
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(teams[index].image),
),
const SizedBox(width: 10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(teams[index].name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(
height: 5.0,
),
Text("joined : " + teams[index].date,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.grey[600],
)),
],
),
],
),
),
);
},
itemCount: teams.length,
),
),
],
);
推荐阅读
- javascript - Enter 键的行为类似于 JavaScript 中的箭头键
- amazon-web-services - 将 Elasticache 与 RDS 连接起来?
- vue.js - 如何在 vuex 中使用 InfiniteLoading(错误)
- c# - 在 linq where 子句中强制转换属性
- python - Python:Portaudio Errno -9986 内部 PortAudio 错误
- angular - 在子组件和父组件之间传递数据
- python-3.x - 如何根据子列表中的值过滤 2 级列表?
- regex - 将旧域重定向到新域的主页
- shopify - 在结帐时更新折扣代码时出现 Shopify 400 错误
- office-js - OfficeJS-在对话框中打开角度路线