首页 > 解决方案 > 列表视图中的颤振列表视图不滚动

问题描述

作为我的第一个 Flutter 项目,我正在为报纸构建一个应用程序。有许多新闻类别。对于这些类别,我Widget在主屏幕中创建了一个通用的,Widget将在 a 中的多个类别中多次显示,当我从这些类别中带来多个新闻时Listview,这些类别Widgets也包含在其中。具有此泛型Listview的类将在下面给出。WidgetWidgetNewsfeed.dart

这个泛型Widget是从另一个Widget类调用的,该类WidgetFactory.dart实际上调用 API 并使用上面提到Widget的类别泛型来构建主屏幕。此类使用Listview.builderwhich is inside FutureBuilder

问题是,当我在屏幕上打开应用程序时,会出现新闻但我无法滚动,它保持不变。我检查了 API 是否真的带来了新闻,在控制台中我打印了 API 响应,所有的新闻都被获取了,但我仍然无法滚动。

流程是main.dart -> WidgetFactory() -> Newsfeed()

小部件工厂()

class WidgetFactory extends StatefulWidget {
  @override
  _WidgetFactoryState createState() => _WidgetFactoryState();
}

class _WidgetFactoryState extends State<WidgetFactory> {
  List homeScreenCategories = [4, 14, 13, 23, 8015, 22];

  Future<List> newsPostList;
  List<List<NewsPost>> categoryNewsPostList;

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

    newsPostList = fetchNews();
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return Container(
      alignment: Alignment.center,
      child: Container(
        child: RefreshIndicator(
            child: FutureBuilder(
              future: newsPostList,
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if(snapshot.data == null) {
                  return Container(
                      child: CircularProgressIndicator()
                  );
                } else {
                  return ListView.builder(
                    shrinkWrap: true,
                    physics: const AlwaysScrollableScrollPhysics(),
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      return _getCategoryNews(snapshot, index);
                    },
                  );

                }
              },
            ),
            onRefresh: () {
              fetchNews();
            }
        ),
      ),
    );
  }

  Future<List> fetchNews() async {
    String url = "url";
    Response response = await Dio().get(url);

    if(response.statusCode == 200) {
      List newsPostList = [];

      for(int i=0; i<response.data.length; i++) {
        newsPostList.add(response.data[i]);
      }
      return newsPostList;
    } else {
      throw Exception("Failed to fetch category");
    }
  }

  Widget _getCategoryNews(snapshot, int index) {
    List<NewsPost> newsPostList = [];

    for(var c in snapshot.data[index]['items']) {
      NewsPost newsPost = NewsPost.getNewsPostFromAPI(c);
      newsPostList.add(newsPost);
    }
    return Newsfeed(newsPostList, "National");
  }
}

新闻提要()

class Newsfeed extends StatefulWidget {
  String categoryName;

  List<NewsPost> newsPostList;

  Newsfeed(this.newsPostList, this.categoryName);
  @override
  _NewsfeedState createState() => _NewsfeedState(this.newsPostList, this.categoryName);
}

class _NewsfeedState extends State<Newsfeed> {
  final GlobalKey<ScaffoldState> _scaffoldKeyTwo = new GlobalKey<ScaffoldState>(debugLabel: '_MainScreenKey');

  String categoryName;

  _NewsfeedState(this.newsPostList, this.categoryName);

  List<NewsPost> newsPostList;

  var dio = new Dio();

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

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
      alignment: Alignment.center,
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: newsPostList.length,
          itemBuilder: (BuildContext context, int index) {
            print(newsPostList[index]);
            return _getNewsPostWidgets(index);
          }
      ),
    );

  }

  Widget _getNewsPostWidgets(int index) {
    var newsPost = newsPostList[index];

    if(index < 5) {
      if(index == 0) {
        return GestureDetector(
            onTap: () {
              Navigator.push(
                  context,
                  ScaleTransitionRoute(
                      page: NewsPostDetails(newsPostList, index)
                  )
              );
            },
            child: Column(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                  //constraints: BoxConstraints(minWidth: double.infinity, maxWidth: double.infinity),
                  constraints: BoxConstraints.expand(
                      width: double.infinity,
                      height: 40
                  ),
                  color: const Color(0xFF2b4849),
                  child: Text(
                    this.categoryName,
                    style: TextStyle(
                        fontSize: 33,
                        color: Colors.white
                    ),
                  ),
                ),
                BlockHeadline(newsPost)
              ],
            )
        );
      }
      else {
        return GestureDetector(
          onTap: () {
            Navigator.push(
                context,
                ScaleTransitionRoute(
                    page: NewsPostDetails(newsPostList, index)
                )
            );
          },
          child: ListedNews(newsPost),
        );
      }
    }
    else {
      return Container(
        color: const Color(0xFF2b4849),
        child: index == 5 ? FlatButton(
          child: Text(
            "See More",
            style: TextStyle(
                color: Colors.white
            ),
          ),
          onPressed: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) => NewsFeedForSpecificCategory(newsPostList)
                )
            );
          },
        ) : Container(),
      );
    }
  }

  openNewsPostDetails(List<NewsPost> newsPostList, int index) {
    Navigator.push(
        context,
        ScaleTransitionRoute(
            page: NewsPostDetails(newsPostList, index)
        )
    );
  }
}

我试过的

我发现了一些与这个问题有关的问题。试过那些。

  1. 我用shrinkwrap=true在我的Listview.builder,但没用。
  2. Column用inside试过了SingleChildScrollView(),还是不行。
  3. 里面Listview.builder加了physicsas AlwaysScrollable(),也是白费。

因为我是新手,所以我尝试过的东西可能看起来很愚蠢。

另一件事是,显示在主屏幕上的新闻将我带到详细信息页面,并且向左向右滑动也将我带到其他新闻。引起麻烦的是主屏幕,而不是滚动。

如果您能提供一些线索,那将是很大的帮助。

标签: androidiosfluttermobile

解决方案


我已经找到了解决这个问题的方法。其实很简单。

build()我的课堂方法中,我_NewsfeedState添加ClampingScrollPhysics()physics.

@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
      alignment: Alignment.center,
      child: ListView.builder(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          itemCount: newsPostList.length,
          itemBuilder: (BuildContext context, int index) {
            print(newsPostList[index]);
            return _getNewsPostWidgets(index);
          }
      ),
    );

  }

有效。


推荐阅读