如何解决显示垂直视口的颤振抽屉被赋予无限高度

Question

值得一提的是，我对 Flutter 和 Stackoverflow 都是新手。

在我的新闻阅读器应用程序中，我添加了一个侧边抽屉，它使用 FutureBuilder 从 API 中提取新闻类别。有一个DrawerHeader 包含名为Popular News 的类别，该类别不是从API 获取的，它是静态的。

每次我打开 API 时，热门新闻类别都会显示并且工作正常，但其他类别不显示，而是在控制台中显示如下错误。

I/flutter ( 4486): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4486): The following assertion was thrown during performResize():
I/flutter ( 4486): Vertical viewport was given unbounded height.
I/flutter ( 4486): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 4486): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 4486): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 4486): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 4486): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 4486): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 4486): the height of the viewport to the sum of the heights of its children.

我的代码如下

返回抽屉的小部件

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

    return SizedBox(
      width: SizeConfig.safeBlockHorizontal*50,
      child: Theme(
        data: Theme.of(context).copyWith(canvasColor: const Color(0xFF2b4849)),
        child: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child:  ListTile(
                  title: Text(
                    "Popular News",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 25
                    ),
                  ),
                  onTap: (){
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (BuildContext context) => MostPopularNewsfeed(),
                        )
                    );
                  },
                ),
              ),
          FutureBuilder(
            future: category,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if(snapshot.data == null) {
                return Container(
                  child: Center(
                    child: Text(
                      "Loading",
                      style: TextStyle(
                          color: Colors.white
                      ),
                    ),
                  ),
                );
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _getDrawer(snapshot, index);
                  },
                );
              }
            },
          ),
            ],
          ),
        ),
      ),
    );
  }

initState() : 这个category 是Future<List>

void initState() {
    super.initState();

    setState(() {
       category = fetchCategory();
    });
  }

fetchCategory() ：这个从 API 中获取类别。

Future<List<Category>> fetchCategory() async {
    //try {
    String url = "https://tbsnews.net/json/category/news/list";
    dio.interceptors.add(DioCacheManager(CacheConfig(baseUrl: url)).interceptor);
    Response response = await Dio().get(url);
    print(response);

    List<Category> categoryList = [];
    final Future<Database> dbFuture = categoryDatabaseHelper.initDb();

    if(response.statusCode == 200) {
      var decode = response.data;
      print(decode);
      for (var c in decode) {
        Category category = Category(c['tid'], c['name']);
        await categoryDatabaseHelper.insertCategory(category);
        categoryList.add(category);
      }
      return categoryList;
      //categoryDatabaseHelper.insertCategory(categoryList);
    } else {
      throw Exception("Failed to fetch category");
    }
  }

到目前为止我所尝试的

我尝试将DrawerHeader 和FutureBuilder 放入Expanded 小部件而不是ListView。没用。

在 ListView 中，我添加了 shrinkWrap: true，还添加了 scrollDirection: Axis.vertical。那也没用。

也尝试将它们放入 SizeBox 和 Column 小部件中。那也没用。

以上是我通过在StackOverflow中搜索与此问题相关的先前问题找到的。最后，我自己发布一个问题。

需要注意的是，当我删除 DrawerHeader 时，一切都开始正常工作，不再有麻烦了。但是这个DrawerHeader 必须在那里。

非常感谢您的宝贵时间和真诚的帮助。

Answer 1

如果问题仅出在 DrawerHeader 上，请尝试使用 SizedBox 或 ConstrainedBox 对其进行包装，并为其设置一定的高度和宽度。 问题是 DrawerHeader 没有受到约束，因此 ListView 在构建时不会知道其尺寸或约束并引发此错误。

这是我有根据的猜测，让我知道它是否有效。