尽管 Flutter 中有 SingleChildScrollView，但我无法让我的应用滚动

Question

在我的应用程序中，我使用BlogTile和CategoryTile小部件（由我自己制作），我在Contaniers/Columns中使用它们。 当我将SingleChildScrollView与CategoryTile一起使用并将轴设为水平时，它工作正常。 但是一旦我将它用于BlogTile ，它就不起作用了。 我无法在我的应用程序中垂直滚动。 但是，当我尝试通过单击CategoryTile和BlogTile之间的部分来垂直滚动时，它可以工作。 但是当我尝试通过单击它的任何其他部分来滚动时，它不起作用。 请有人帮助我

检查此代码 -

import 'package:flutter/material.dart';
import 'package:news_app/helper/data.dart';
import 'package:news_app/helper/news.dart';
import 'package:news_app/models/article_model.dart';
import 'package:news_app/models/category_models.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<CategoryModel> categories = new List<CategoryModel>();
  List<ArticleModel> articles = new List<ArticleModel>();
  bool loading = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    categories = getCategories();
    getNews();
  }

  getNews() async {
    News newsClass = News();
    await newsClass.getNews();
    articles = newsClass.news;
    setState(() {
      loading = false;
      print('Done');
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Flutter',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              Text(
                'News',
                style: TextStyle(
                  color: Colors.blue,
                ),
              ),
            ],
          ),
          //elevation: 2.0,
        ),
        body: loading
            ? Center(
                child: Container(
                  child: CircularProgressIndicator(),
                ),
              )
            : SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: SingleChildScrollView(
                  child: Container(
                    padding: EdgeInsets.only(top: 10.0),
                    child: SingleChildScrollView(
                      child: Column(
                        children: <Widget>[
                          ///Categories
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 16.0),
                            height: 70.0,
                            child: ListView.builder(
                              itemCount: categories.length,
                              scrollDirection: Axis.horizontal,
                              shrinkWrap: true,
                              itemBuilder: (context, index) {
                                return CategoryTile(
                                  imageUrl: categories[index].imageUrl,
                                  categoryName: categories[index].categoryName,
                                );
                              },
                            ),
                          ),

                          SizedBox(
                            height: 30.0,
                          ),
                          ///Blogs
                          SingleChildScrollView(

                            child: Container(
                              child: ListView.builder(
                                scrollDirection: Axis.vertical,
                                shrinkWrap: true,
                                itemCount: articles.length,
                                itemBuilder: (context, index) {
                                  return BlogTile(
                                    imageUrl: articles[index].urlToImage,
                                    title: articles[index].title,
                                    desc: articles[index].description,
                                  );
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
      ),
    );
  }
}

class CategoryTile extends StatelessWidget {
  final imageUrl, categoryName;
  CategoryTile({this.imageUrl, this.categoryName});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.only(right: 16.0),
        child: Stack(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(6.0),
              child: Image.network(
                imageUrl,
                width: 120.0,
                height: 160.0,
                fit: BoxFit.cover,
              ),
            ),
            Container(
              alignment: Alignment.center,
              width: 120.0,
              height: 160.0,
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(6.0)),
              child: Text(
                categoryName,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                  fontSize: 14.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class BlogTile extends StatelessWidget {
  final String imageUrl, title, desc;
  BlogTile(
      {@required this.imageUrl, @required this.desc, @required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(imageUrl),
          Text(title),
          Text(desc),
        ],
      ),
    );
  }
}

Answer 1

我认为这里的问题是您为某些 ScrollViews 提供了无限的高度和宽度。 首先，不要使用相互嵌套的多个滚动小部件。 但是，如果您想这样做，请尝试将每个滚动视图包装在 Container 中，如下所示：

SingleChildScrollView(
 scrollDirection: Axis.vertical,
 child: Container(
   height: 50.0,
   width: 50.0,
   child: SingleChildScrollView(
     child: ...,
   ),
 ),
),

我还建议不要使用 SingleChildScrollView，而是使用 ListView 小部件。 它的工作原理几乎相同，您可以在其中放置多个孩子。 一个简单的 ListView() 就可以了。 不要使用 ListView.builder 或任何其他聚合 function。