时间戳

首页 > 解决方案 > 如何使该表可滚动到底部

flutter - 如何使该表可滚动到底部

问题描述

我是flutter的初学者，我用api的leagueboard表编写了一个代码，执行后我发现我的表没有滚动，滚动只出现在顶部但没有滚动到底部

在此处输入图像描述

这是我尝试过的：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:http/http.dart' as http;


class LeagueBoard extends StatefulWidget {

  @override
  _LeagueBoardState createState() => _LeagueBoardState();
}

class _LeagueBoardState extends State<LeagueBoard> {

  List<Club> clubs = [];

  getTable() async {
    http.Response response = await http.get(
        'http://api.football-data.org/v2/competitions/PL/standings',
        headers: {'X-Auth-Token': '86014f6025ae430dba078acc94bb2647'});
    String body = response.body;
    Map data = jsonDecode(body);
    List table = data['standings'][0]['table'];
    // for (var team in table) {
    //   clubs.add(Club(team['team']['crestUrl'].toString(), team['position'].toString(),team['points'].toString(),team['points'].toString(),team['playedGames'].toString(),team['won'].toString(),
    //       team['draw'].toString(),team['lost'].toString(),team['goalsFor'],team['goalsAgainst']));
    //   print(team);
    // }
    //  for (var team in table) {
    //   clubs.add(Club(team['team']['crestUrl'].toString(), team['position'].toString(),team['points'].toString(),team['points'].toString(),team['playedGames'].toString(),team['won'].toString(),
    //       team['draw'].toString(),team['lost'].toString(),team['goalsFor'],team['goalsAgainst']));
    //       print(team);
    // }

    // for (var team in clubs) {
    //   debugPrint(team.toString());
    // }

    setState(() {
      for (var team in table) {
        clubs.add(Club(team['team']['name'],team['team']['crestUrl'], team['position'].toString(),team['points'].toString(),team['playedGames'].toString(),team['won'].toString(),
            team['draw'].toString(),team['lost'].toString(),team['goalsFor'],team['goalsAgainst']));
        print("hello");
      }
    });
  }


  // List<Club> clubs = [ Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),
  //   Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),
  //   Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),
  //   Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),
  //   Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),
  //   Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),
  //   Club("Manchester City","https://upload.wikimedia.org/wikipedia/fr/thumb/b/ba/Logo_Manchester_City_2016.svg/1200px-Logo_Manchester_City_2016.svg.png","1","77","17","15","1","1",25,5),
  //   Club("Chelsea","https://upload.wikimedia.org/wikipedia/fr/thumb/5/51/Logo_Chelsea.svg/768px-Logo_Chelsea.svg.png","2","70","17","13","2","3",19,8),];


  @override
  void initState() {
    super.initState();
    getTable();
  }

  @override
  Widget build(BuildContext context) {
 return clubs == null
     ? Container(
   color: Colors.white,
   child: Center(
     child: CircularProgressIndicator(
       valueColor: AlwaysStoppedAnimation<Color>(
         Color(0xFFe70066),
       ),
     ),
   ),
 )
     : Scaffold(
   appBar: AppBar(
     title: Text("LeagueBoard"),
     backgroundColor: Colors.blue[300],
     elevation: 0.0,
   ),
   body: SingleChildScrollView(
     child: Column(
       children: [
         TopRow(),
         ListView.builder(
           shrinkWrap: true,
          // physics: NeverScrollableScrollPhysics(),
           itemCount: clubs.length,
           itemBuilder: (context, index) {
             return TableRow(index: index, clubs:clubs);
           },
         ),
       ],
     ),
   ),
    );
  }
}

class TopRow extends StatelessWidget {
  const TopRow({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(fontSize: 11, fontWeight: FontWeight.bold);
    TextStyle textStyle2 = TextStyle(fontSize: 13);

    return Container(
      child: Row(
        children: [
          Container(
            alignment: Alignment.center,
            width: 30,
            height: 30,
            child: Text('#'),
          ),
          SizedBox(width: 20),
          Container(alignment: Alignment.center, child: Text('Team')),
          Spacer(),
          Container(
            width: 28,
            child: Text('MP', style: textStyle),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text('W', style: textStyle),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text('D', style: textStyle),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text('L', style: textStyle),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text('GD', style: textStyle),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text('Pts', style: textStyle),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 5,
            height: 20,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color: Colors.grey[800],
            ),
            padding: EdgeInsets.fromLTRB(10, 5, 2, 5),
          ),
        ],
      ),
    );

  }
}

class TableRow extends StatelessWidget {
  final int index;
  final List<Club> clubs;
  const TableRow({
    this.index,
    this.clubs,
    Key key,
  }) : super(key: key);
/////////////////////////////////////////////////////////////////////linkwell
  ////////////////////////////////////////////////////////////////////
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(fontSize: 11, fontWeight: FontWeight.bold);
    TextStyle textStyle2 = TextStyle(fontSize: 13, fontWeight: FontWeight.bold);
    return Container(
      width: double.infinity,
      height: 40,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black38, width: 0.2),
        color: index == 0  ? Colors.yellow[100] : Colors.purpleAccent[20],
      ),
      child: Row(
        children: [
          Container(//iinkwell
            alignment: Alignment.center,
            width: 30,
            height: 40,
            color: index < 2
                ? Colors.blue
                : index == 2

                ? Colors.red[400]
                : index > 11
                ? Colors.red[800]
                : Colors.grey[700],
            child: Text(
              (index + 1).toString(),
              style: TextStyle(color: Colors.white),
            ),
          ),
          SizedBox(width: 20),
          Row(children: [
            SvgPicture.network(clubs[index].image,
              width: 24.0, height: 24.0,
            ),
            SizedBox(width: 5.0),
           clubs[index].name.length > 11
                ? Text(clubs[index].name
                .toString()
                .substring(0, 11) +
                '...')
                : Text(clubs[index].name.toString(), style: textStyle2),
          ],),


          Spacer(),
          Container(
            width: 28,
            child: Text(clubs[index].matches, style: textStyle2),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text(clubs[index].wins, style: textStyle2),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text(clubs[index].draws, style: textStyle2),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text(clubs[index].loss, style: textStyle2),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text((clubs[index].goals - clubs[index].goalsIn).toString(), style: textStyle2),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 28,
            child: Text(clubs[index].points, style: textStyle2),
          ),
          SizedBox(
            width: 5,
          ),
          Container(
            width: 5,
            height: 20,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color: Colors.grey[600],
            ),
            padding: EdgeInsets.fromLTRB(10, 5, 2, 5),
          ),
        ],
      ),
    );
  }
}



class Club {

  String name;
  String image;
  String rank;
  String points;
  String matches;
  String wins;
  String loss;
  String draws;
  int goals;
  int goalsIn;

  Club(this.name,this.image,this.rank,this.points, this.matches,this.wins,this.loss,this.draws,this.goals,this.goalsIn);

}

我正在尝试让我的表格滚动，因为由于非滚动原因，我无法看到所有来自 becand 的团队

标签： flutterdart

解决方案

您在 SingleChildScrollView 中使用 ListView。所以将该 ListView 设置为非主要的。

primary: false

在此时更改您的代码

ListView.builder(
       shrinkWrap: true,
       primary: false,
       // physics: NeverScrollableScrollPhysics(),
       itemCount: clubs.length,
       itemBuilder: (context, index) {
         return TableRow(index: index, clubs:clubs);
       },
     ),

推荐阅读