Flutter 滚动整个屏幕，包括 gridview

Question

我制作了一个名为美食廊的应用程序，它只显示一些随机食物。所以首先我想要一个主图在顶部，所以我使用了一个容器来将它显示在顶部。然后我在容器下实现了一个网格视图来显示食物的网格视图图像。但问题是每当我滚动页面时，只有 gridview 正在滚动，而容器就像固定而不滚动。以下是代码。

      body: SafeArea(


      // Container

              child: Container(
          child: Column(
            children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Container(
                        height: 200,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          image: DecorationImage(
                            image:AssetImage('assets/burger.jpeg'),
                            fit: BoxFit.cover
                          )
                        )
                          
                        
                      ),
                    ),

              //GridView

                    Expanded(
                    child: GridView.builder(
                      itemCount: name.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                      itemBuilder: (BuildContext context, int index){
                        return Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20.0),
                               image:DecorationImage(
                                image: AssetImage('assets/${img[index]}'),
                                fit: BoxFit.cover
                              )
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                
                                Container(
                                  
                                  width: double.infinity,
                                  height: 50.0,
                                  color: Colors.grey[800].withOpacity(0.5),
                                  child:Center(child: Text('${name[index]}',style: TextStyle(color: Colors.white,fontSize: 20.0)),)
                                ),
                              ],
                            ),
                          ),
                        );
                      })
                ),

              
            ],
          ),
        ),
      ),
      
      ),
    );
  }
}

This is how it looks

如您所见，容器固定在顶部。我希望整个屏幕不仅滚动 gridview。我尝试使用 SingleChildScrollView 但它不起作用。

Answer 1

用 ListView 更改您的列，删除 Expanded 并将这些添加到 GridView 的行中：

  physics: ScrollPhysics(), // to disable GridView's scrolling
  shrinkWrap: true,

所以你的代码应该是这样的：

SafeArea(
  child: Container(
    child: ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: Container(
              height: 200,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  image: DecorationImage(
                      image:AssetImage('assets/burger.jpeg'),
                      fit: BoxFit.cover
                  )
              )


          ),
        ),

        //GridView

        GridView.builder(
          shrinkWrap: true,
            physics: ScrollPhysics(),
            itemCount: name.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index){
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      image:DecorationImage(
                          image: AssetImage('assets/${img[index]}'),
                          fit: BoxFit.cover
                      )
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[

                      Container(

                          width: double.infinity,
                          height: 50.0,
                          color: Colors.grey[800].withOpacity(0.5),
                          child:Center(child: Text('${name[index]}',style: TextStyle(color: Colors.white,fontSize: 20.0)),)
                      ),
                    ],
                  ),
                ),
              );
            }),


      ],
    ),
  ),
);

Answer 2

你应该看看 CustomScrollView

CustomScrollView 让您可以直接提供 slivers 来创建各种滚动效果，例如列表、网格和展开 headers。

Example

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('Grid Item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
  ],
)

Answer 3

这是您的代码

              //GridView
                
                Expanded(
                child: GridView.builder(
                  itemCount: name.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  itemBuilder: (BuildContext context, int index){
                   ***
                    return Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Container(
                        decoration: BoxDecoration(

在 return 之前添加此 if（我添加了 ***）

if(index == 0){
   return Container  //your container Image goes Here
}else{
// your last return for other items 
}

希望对您有所帮助...

Flutter 滚动整个屏幕，包括 gridview

Flutter Scroll entire screen including gridview

gridview

dart

flutter

flutter-layout