如何添加双滚动[FLUTTER]

Question

我有一个通用页面滚动 SingleChildScrollView 和一个产品（电影）滚动 GridView.builder

但是他们不一起工作

[

屏幕无法正确滚动

但是如果你从 NewsCatalogWidget 中删除高度，它会抛出错误，因为高度是必需的

我添加了 **shrinkWrap: true, ** 但它不会向后滚动

import 'package:flutter/material.dart';

class NewsCatalogWidget extends StatelessWidget {
  const NewsCatalogWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        scrollDirection: Axis.vertical,
        itemCount: 10,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 1.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return FutureBuilder(
            future: Future.delayed(Duration(seconds: 1)),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Placeholder();
              } else {
                return GestureDetector(
                  child: Container(
                    height: 100,
                    width: 100,
                    color: Colors.amber,
                    child: Text(
                      '$index',
                      style: TextStyle(color: Colors.green, fontSize: 130),
                    ),
                  ),
                );
              }
            },
          );
        });
  }

  fetchData(int index) {}
}

Answer 1

无需查看代码，您必须遵守一些规则才能实现嵌套滚动视图：

• 为嵌套的可滚动小部件提供固有高度，例如用

  SizedBox

  或

  Container

  包裹它。
• 将嵌套滚动部件的属性

  shrinkWrap

  设置为

  true

  ，最好不是强制的。
• 通过将

  physics

  设置为

  NeverScrollableScrollPhysics()

  ，防止嵌套的可滚动小部件滚动。

注意：如果您提供了固有高度，您绝对可以允许嵌套的可滚动小部件滚动。

将上述规则应用于您的代码，示例：

Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                  child: Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: MediaQuery.of(context).size.height / 2,
                    child: GridView.builder(
                      itemBuilder: (context, index) =>
                          Container(color: Colors.black),
                      itemCount: 100,
                      shrinkWrap: true,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                      ),
                    ),
                  ),
                  Text('Out of the grid view'),
                ],
              )
              ),
            ),
          ],
        )