列表视图中的颤动列表视图不滚动

Question

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

这个通用Widget是从另一个Widget类WidgetFactory.dart调用的，该类实际上调用 API 并通过使用上面提到的用于类别的通用Widget来构建主屏幕。 这个类使用一个Listview.builder ，它在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. 我在Listview.builder使用了shrinkwrap=true ，但没有用。
2. 尝试在SingleChildScrollView()使用Column ，仍然没有用。
3. 在Listview.builder添加physics作为AlwaysScrollable() ，也是徒劳的。

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

还有一件事是，显示在主屏幕上的新闻将我带到了详细信息页面，向左向右滑动也会将我带到其他新闻。 是主屏幕引起了问题，而不是滚动。

如果您能提供一些线索，那将是非常有帮助的。

Answer 1

将 ListView 放在 ListView 中是一种反模式。

这个问题有几种解决方案，

解决方案1：

将这两个项目列表合并为一个项目列表，并将其显示为单个 ListView。

解决方案2：

您可以将 SliverList 用于您的用例。 SliverList 可以将多个 SliverList 包装在单个 CustomScrollView 中。

Answer 2

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

在我的_NewsfeedState类的build()方法中，我添加了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);
          }
      ),
    );

  }

有效。

Answer 3

这会帮助你。

  child: ListView.builder(
    physics: NeverScrollableScrollPhysics(),

谢谢。