как прокручивать два вида, объединенные в flutter

#flutter #dart #flutter-layout

#flutter #dart #flutter-layout

Вопрос:

На видео и картинке ниже горизонтальные и вертикальные виджеты расположены по порядку.

Если вы прокручиваете это, каждый виджет будет перемещаться отдельно, как видео.

Я хочу сделать этот шаг сразу.

пожалуйста, введите видеосвязь

https://firebasestorage.googleapis.com/v0/b/coody-f21eb.appspot.com/o/화면 기록 2020-09-28 오전 8.06.33.mov?alt=mediaamp;token=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=mediaamp;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;
    }
  }


}
  

Ответ №1:

Я вижу, что вы пытаетесь добиться поведения, при котором прокрутка в GridView приводит к прокрутке по всему экрану.

Поскольку ContentsCarousel() и _gridBuilder() находятся в a Column , такого поведения достичь невозможно.

Я бы предложил обернуть ваш Column SingleChildScrollView виджет.