Flutter Listview 无法滚动不显示所有列表答案

【问题标题】：Flutter Listview can't scroll and not display all listFlutter Listview 无法滚动不显示所有列表
【发布时间】：2022-01-06 06:09:19
【问题描述】：

我刚开始使用颤振。就我而言，我想在我的主页上显示 10 个项目列表视图。但该列表视图仅显示 9 个项目。无法滚动列表视图以显示其他项目。你能看出我的代码有什么问题吗？

我一直在通过寻找具有相同标题但没有的主题来寻找解决此问题的方法。我已经更改了我的代码的一些行，但我收到错误“底部超过 240 像素”

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))));
                    })
              ],
            ),
          ),
        ));
  }
}

【问题讨论】：

标签： android flutter dart listview

【解决方案1】：

试试下面的代码：

      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))));
                        })
                  ],
                ),
              ),

您的结果屏幕：

【讨论】：

【解决方案2】：

将此属性添加到Listivew.Builder

physics : NeverScrollableScrollPhysics()

因为它在 SingleChildScrollView 内部。

【讨论】：

我尝试但没有区别

【解决方案3】：

将此行添加到您的代码中。

  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))));
                        })
                  ],
                ),
              ),
            ));
      }
    }

【讨论】：

【解决方案4】：

删除 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))));
                    })
              ],
            ),
          ),
        ));
  }
}

【讨论】：

【解决方案5】：

请尝试使用此代码用这个替换你的body标签，让我知道

Column(
        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))));
                  }) )
        
      ]
    )

【讨论】：