在带有其他小部件的可滚动列中使用Flutter ListView.Builder()

Question

在带有其他小部件的可滚动列中使用Flutter ListView.Builder()

137

我有一个TabBarView()，里面包含不同的视图。我想要其中的一个视图是一个顶部有TextField，下面有ListView.Builder()的Column，并且这两个小部件都在同一个可滚动区域（ScrollView）内。但是我实现的方式出现了一些错误：

@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)
    ],
   );
}

错误：

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.

我读到过在扩展区域中堆叠ListView.builder()的方法，但会导致文本字段有点“粘滞”，这不是我想要的。 :-)

我也尝试使用CustomScrollView，但不是很理解如何实现。

- aksn

3

使用 Expanded 组件将 ListView 包裹起来。 - Vinoth Kumar

18个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gstuntz · Answer 1

在Listview.builder()方法中添加physics: NeverScrollableScrollPhysics()，嵌套的Listview将会滚动。

- Harsh Gupta · Answer 2

最好的方法是通过将列作为SingleChildScrollView的子代并将相同的ScrollController分配给SingleChildScrollView和ListView.builder来使列可滚动。这将使文本字段和下面的ListView都可以滚动。

- Bassem Karbia · Answer 3

只需在 ListView.builder() 中添加 physics: NeverScrollableScrollPhysics()，就可以使其可滚动。

- Musfiq Shanta · Answer 4

return Column(
         children: [
           Text("Popular Category"),
            Expanded(
         child: ListView.builder(`enter code here`
             shrinkWrap: false,
             scrollDirection: Axis.horizontal,
             itemCount: 3,
             itemBuilder: (context, index) {
               return Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Text("hello"),
                 ],
               );
             }),   
           ),
         ],    
     );

- Krishna Kumar · Answer 5

  body:  SingleChildScrollView(
    physics: ScrollPhysics(),
    child: Column(
          children: [
            getFiltersOnHomePage(),

            SizedBox(
              child: StreamBuilder(
                stream: FirebaseFirestore.instance.collection('posts').snapshots(),
                builder: (context,
                    AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                  return ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder: (ctx, index) => Container(
                            margin: EdgeInsets.symmetric(
                              horizontal: width > webScreenSize ? width * 0.3 : 0,
                              vertical: width > webScreenSize ? 15 : 0,
                            ),
                            child: PostCard(
                              snap: snapshot.data!.docs[index].data(),
                            ),
                          ));
                },
              ),
            ),
           

          ],
        ),
  ),[enter image description here][1]***You will be able to scroll through the page by using Expanded Widget

引用使用此方法，您可以在整个页面上滚动。该页面包括一个位于可滚动列内的行和列表视图构建器。

- Wege · Answer 6

在我的情况下，我添加了一个透明颜色的容器，并将其高度增加到270来解决这个问题。

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use it
    ),
    Container(
      color: Colors.transparent,
      height: 270.0,
    ),
  ],
)

- Edman · Answer 7

Column 无法滚动，这就是为什么顶部的 TextField 不会滚动而底部的 ListView 会滚动的原因。

在我看来，最好的解决方法是将你的 TextField 放在 ListView 的第一项。

这样你就不需要一个 Column，你的父部件是 ListView，它的子部件是 TextField，后面跟着你用 _postBuilder 构建的其余项目。

- Mahedy Hasan · Answer 8

只需在listview Builder中使用物理效果，它就会像可滚动的一样工作。

ListView.builder(
    physics: ScrollPhysics(),  // add this
    shrinkWrap: true,
    itemCount: rentalTypes.length,
    itemBuilder: (BuildContext context,index){
        String details = rentalTypes[index]['houseDetails'];
        String rent = rentalTypes[index]['rent'];
        return PostItem(image: AssetImage("assets/images/bedroom.jpg"), description: details, price: rent);
    }
)