首页 > 解决方案 > 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 后,我想知道发生了什么以及如何解决错误

标签: flutterdart

解决方案


我认为你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,
      ),
    ),
  ],
);

推荐阅读