列内的 ListView 导致“垂直视口被赋予无界高度"

ListView inside Column causes #39;Vertical viewport was given unbounded height#39;(列内的 ListView 导致“垂直视口被赋予无界高度)

问题描述

我是 Flutter 的新手，并且在布局方面遇到了问题.

I am new to flutter and having trouble with layouts.

我想要这样的东西:

一个粘性标题和它下面的滚动视图.我想过使用带有两个孩子的 Column 小部件 - 第一个是标题，第二个是 ListView.

A sticky header and a scroll view below it. I thought of using Column widget with two children - first being the header and second being the ListView.

这是我的代码

 Widget build(BuildContext context) {
 return Material(
   elevation: 8.0,
   child: Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: <Widget>[
       Padding(
         padding: const EdgeInsets.all(16.0),
         child: Text(
           title,
           style:
               Theme.of(context).textTheme.subhead.copyWith(fontSize: 18.0),
           textAlign: TextAlign.left,
         ),
       ),
       Divider(height: 4.0),
       ListView.builder(itemBuilder: (context, i) {
         return ListTile(
           title: Text("Title $i"),
           subtitle: Text("Subtitle $i"),
         );
       }),
     ],
   ),
 );
}

我收到以下错误.

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

我添加了消息中提到的 ListView 的 shrinkWrap 为 true，但这也不起作用.

I added made shrinkWrap of ListView true as mentioned in the message, but that didn't work either.

此布局的父级是一个包含各种此类布局页面的堆栈，所有这些布局页面都在后台，预计用户已选择.

The parent of this layout is a stack containing various such layout-pages, all of this layout pages being offstage expect the one user has selected.

我做错了什么?

推荐答案

尝试用 Flexible 或 Expanded 小部件包装您的 ListView.builder:

Try wrapping your ListView.builder with a Flexible or Expanded widget:

Flexible(
            child: ListView.builder(
              itemBuilder: (context, i) {
                return ListTile(
                  title: Text("Title $i"),
                  subtitle: Text("Subtitle $i"),
                );
              },
            ),
          ),

这篇关于列内的 ListView 导致“垂直视口被赋予无界高度"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！