如何滚动浏览结合在颤振中的两个视图

Question

In the video and picture below, the horizontal and vertical widgets are arranged in order.

If you scroll through this, each widget will move separately, just like a video.

I want to make this move at once.

please enter the videoLink

https://firebasestorage.googleapis.com/v0/b/coody-f21eb.appspot.com/o/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8%202020-09-28%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.06.33.mov?alt=media&token=8a9d3fd0-1256-4d92-9a57-

please enter Imglink

https://firebasestorage.googleapis.com/v0/b/coody-f21eb.appspot.com/o/KakaoTalk_Photo_2020-09-28-08-15-13.jpeg?alt=media&token=77cd7fba-5b62-4d68-b760-8

import 'package:flutter/material.dart';
import 'element_homepage/contents_carousel.dart';
import 'element_homepage/gridView_of_homepage.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'product_detail.dart';

class HomeScreen extends StatefulWidget {
  var stopTrigger = 1;
  var unchanging ;
  List<bool>bool_list_each_GridSell =[];
  List<String> styleList = [];
  var tf_copy = [];

  final FirebaseUser user;
  HomeScreen(this.user);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  @override
  void initState() {
    super.initState();
    if(widget.stopTrigger == 1){
      setState(() {
        widget.unchanging = Firestore.instance.collection("uploaded_product").snapshots();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title:Text("logo --- rec --- menu")),
        body: _bodyBuilder()


      ),
    );
  }

  Widget _bodyBuilder() {
    return Column(
        children: [
          ContentsCarousel(),
          _gridBuilder()
        ],
      );
  }


  Widget _gridBuilder() {
    return Expanded(
      child: StreamBuilder <QuerySnapshot>(
        stream: _commentStream(),
        builder: (BuildContext context, AsyncSnapshot snapshot){
          if(!snapshot.hasData){
            return Center(child:  CircularProgressIndicator());
          }
          var items =  snapshot.data?.documents ??[];
          var fF = items.where((doc)=> doc['style'] == "오피스룩").toList();
          var sF = items.where((doc)=> doc['style'] == "로맨틱").toList();
          var tF = items.where((doc)=> doc['style'] == "캐주얼").toList();
          fF.addAll(sF);
          fF.addAll(tF);
          widget.tf_copy.addAll(fF);
          if(widget.stopTrigger == 2 ){
            fF.shuffle();
            widget.unchanging = fF;
          }
          return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 0.6,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,),
              itemCount: fF.length,
              itemBuilder: (BuildContext context, int index) {
                for(var i=0; i<fF.length; i++){
                  widget.bool_list_each_GridSell.add(false);
                }
                return _buildListItem(context,widget.unchanging[index]);
              }
          );


        },
      ),
    );
  }

  Widget _buildListItem(context, document) {
    return
      InkWell(
          onTap: (){
            Navigator.push(context, MaterialPageRoute(builder: (context){
              return ProductDetail(widget.user, document);
            }));
          },
          child: Image.network(
              document['thumbnail_img'],
              fit : BoxFit.cover)
      );

  }

  Stream<QuerySnapshot> _commentStream() {
    widget.stopTrigger +=1;
    if(widget.stopTrigger == 2 ){
      return widget.unchanging;
    }
  }


}

Answer 1

I see you're attempting to achieve a behavior where a scroll on the GridView results in a scroll on the whole screen.

As the ContentsCarousel() and _gridBuilder() are in a Column , this behaviour cannot be achieved.

What I would suggest is wrapping your Column with a SingleChildScrollView widget.