如何滚动浏览组合在一起的两个视图

Question

在下面的视频和图片中，水平和垂直小部件按顺序排列。

如果你滚动浏览，每个小部件都会单独移动，就像视频一样。

我想立刻采取行动。

请输入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%88%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.06.33.mov？alt=媒体&令牌=8a9d3fd0-1256-4d92-9a57-

请输入Imglink

https://firebasestorage.googleapis.com/v0/b/coody-f21eb.appspot.com/o/KakaoTalk_Photo_2020-09-28-08-15-13.jpeg?alt=media&令牌=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

我看到您正试图实现这样一种行为，即在GridView上滚动会导致在整个屏幕上滚动。

由于ContentsCarousel()和_gridBuilder()在Column中，所以不能实现这种行为。

我建议用SingleChildScrollView小部件包装您的Column。