与其他小部件一起滚动的Column中的Flutter ListView.Builder（） [英] Flutter ListView.Builder() in scrollable Column with other widgets

问题描述

我有一个带有许多不同视图的TabBarView（）。我想让它们成为一列，其顶部为TextField，而其下为ListView.Builder（），但两个小部件均应位于同一可滚动区域（scrollview）中。我实现它的方式引发了一些错误：

  @override 
小部件构建（BuildContext上下文）{
返回新列（
 mainAxisAlignment：MainAxisAlignment.center，
 mainAxisSize：MainAxisSize.max，
子代：< Widget> [
新Padding（
填充：EdgeInsets。对称（水平：16.0，垂直：8.0），
子级：new TextField（
装饰：new InputDecoration（
 hintText：在此处输入！ 
），
）
），
新的ListView.builder（
 itemCount：_posts.length，itemBuilder：_postBuilder）
]，
）; 
} 
  

错误：

<$ p / p> I / flutter（23520）：在performResize（）期间引发了以下断言：
I / flutter（23520）：垂直视口的高度不受限制。
I / flutter（23520）：视口沿滚动方向扩展以填充其容器。在这种情况下，垂直
I / flutter（23520）：视口具有无限的垂直空间，其中扩张。这种情况
I / flutter（23520）：通常在将可滚动小部件嵌套在另一个可滚动小部件内时发生。
I / flutter（23520）：如果此小部件始终嵌套在可滚动小部件中，则无需使用视口，因为
I / flutter（23520）：将始终有足够的垂直空间用于孩子们。在这种情况下，请考虑改用Column
I / flutter（23520）：。否则，请考虑使用 shrinkWrap属性（或ShrinkWrappingViewport）来设置
I / flutter的大小（23520）：视口的高度与其子代高度的总和。


我读到有关在扩展区域中堆叠ListView.builder（）的信息，但它使文本字段成为了一种不是我想要的粘性。 ：-)

我也遇到过CustomScrollView，但并不完全了解如何实现它。

解决方案

将ListView放在 Expanded 小部件内应该可以解决您的问题：

  @override 
小部件构建（BuildContext上下文）{
返回新列（
 mainAxisAlignment：MainAxisAlignment.center，
 mainAxisSize：MainAxisSize.max，
子级：< Widget> [
新建填充（
填充：EdgeInsets.symmetric（水平：16.0，垂直：8.0）），
子级：new TextField（
装饰：new InputDecoration（
 hintText：在这里输入！ 
），
）
），
 new Expanded（child：ListView.builder（
） itemCount：_posts.length，itemBuilder：_postBuilder））
]，
）; 
} 
  

I have a TabBarView() with an amount of different views. I want of them to be a Column with a TextField at top and a ListView.Builder() below, but both widgets should be in the same scrollable area (scrollview). The way I implemented it threw some errors:

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder)
    ],
   );
}

Error:

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

I read about stacking the ListView.builder() in an Expanded-Area but it made the textfield kind of "sticky" which is not what I want. :-)

I also came across CustomScrollView but didn't fully understand how to implement it.

解决方案

Placing the ListView inside an Expanded widget should solve your problem:

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new Expanded(child: ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder))
    ],
   );
}

这篇关于与其他小部件一起滚动的Column中的Flutter ListView.Builder（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！