Flutter：如何禁用 GridView 小部件的滚动，但为整个页面启用滚动？

Question

我正在构建一个应用程序，其中有一个页面提供有关特定交易卡的信息。我希望页面可以滚动，但我还希望页面上有一个网格，每个网格单元显示一个数据点。我使用 GridView.count().

制作了网格

我的问题是，我没有可以滚动浏览的页面，而是页面的上半部分保持静态，而网格是可滚动的。如何使网格静态，而页面的其余部分可滚动？我也打算在这个网格下面有更多数据，我希望用户能够滚动查看所有数据，网格是页面的静态组件。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:pokehub/size_config.dart';
import 'package:pokemon_tcg/pokemon_tcg.dart';

class CardInfo extends StatefulWidget {
  PokemonCard card;

  CardInfo({required this.card});

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

class _CardInfoState extends State<CardInfo> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey[900],
        appBar: AppBar(
          title: Text(
            "Card Profile",
            style: TextStyle(
                color: Colors.white,
                fontFamily: 'Blinker',
                fontSize: SizeConfig.blockSizeVertical * 3),
          ),
          backgroundColor: Colors.red,
          elevation: 0.0,
        ),
        body: Align(
          alignment: Alignment.center,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                height: SizeConfig.blockSizeVertical * 3,
              ),
              Text(
                "Set: " +
                    widget.card.set.name +
                    "  //  Number: " +
                    widget.card.number,
                style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Blinker',
                    fontSize: SizeConfig.blockSizeVertical * 2),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 3,
              ),
              Hero(
                tag: 'card' + widget.card.id,
                child: Image.network(
                  widget.card.images.large,
                  height: SizeConfig.blockSizeVertical * 30,
                ),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 2,
              ),
              Text(
                widget.card.name,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Blinker',
                  fontSize: SizeConfig.blockSizeVertical * 5,
                ),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 2,
              ),
              Expanded(
                child: GridView.count(
                  mainAxisSpacing: SizeConfig.blockSizeVertical * 4,
                  crossAxisSpacing: SizeConfig.blockSizeHorizontal * 4,
                  crossAxisCount: 3,
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Subtypes",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.subtypes
                                  .map((e) => e.type)
                                  .join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "HP",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.hp!,
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Type",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.types.map((e) => e.type).join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Weakness",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.weaknesses
                                  .map((e) => e.type + e.value)
                                  .join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Resistance",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.resistances
                                  .map((e) =>
                                      e.type == "" ? "None" : e.type + e.value)
                                  .join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Retreat Cost",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.convertedRetreatCost.toString(),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
[enter image description here][1]

Answer 1

您可以在 GridView 上提供 physics: NeverScrollableScrollPhysics() 以禁用滚动效果。如果您想将可滚动作为辅助小部件，请使用 primary: false,

要使整页可滚动，您可以使用 body:SingleChildScrollView(..) or better using body:CustomScrollView(..)

Answer 2

试试这个：

class CardInfo extends StaefulWidget {
  PokemonCard card;

  CardInfo({required this.card});

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

class _CardInfoState extends State<CardInfo> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey[900],
        appBar: AppBar(
          title: Text(
            "Card Profile",
            style: TextStyle(
                color: Colors.white,
                fontFamily: 'Blinker',
                fontSize: SizeConfig.blockSizeVertical * 3),
          ),
          backgroundColor: Colors.red,
          elevation: 0.0,
        ),
        body: Align(
          alignment: Alignment.center,
          child: ListView(
            children: [
              SizedBox(
                height: SizeConfig.blockSizeVertical * 3,
              ),
              Text(
                "Set: " +
                    widget.card.set.name +
                    "  //  Number: " +
                    widget.card.number,
                style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Blinker',
                    fontSize: SizeConfig.blockSizeVertical * 2),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 3,
              ),
              Hero(
                tag: 'card' + widget.card.id,
                child: Image.network(
                  widget.card.images.large,
                  height: SizeConfig.blockSizeVertical * 30,
                ),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 2,
              ),
              Text(
                widget.card.name,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Blinker',
                  fontSize: SizeConfig.blockSizeVertical * 5,
                ),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 2,
              ),
              GridView.count(
                mainAxisSpacing: SizeConfig.blockSizeVertical * 4,
                crossAxisSpacing: SizeConfig.blockSizeHorizontal * 4,
                crossAxisCount: 3,
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(
                        vertical: SizeConfig.blockSizeVertical * 2,
                        horizontal: SizeConfig.blockSizeHorizontal * 2),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.white,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Subtypes",
                            style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 3,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            widget.card.subtypes
                                .map((e) => e.type)
                                .join(", "),
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Blinker',
                              fontSize: SizeConfig.blockSizeVertical * 2,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                        vertical: SizeConfig.blockSizeVertical * 2,
                        horizontal: SizeConfig.blockSizeHorizontal * 2),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.white,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "HP",
                            style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 3,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            widget.card.hp!,
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Blinker',
                              fontSize: SizeConfig.blockSizeVertical * 2,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                        vertical: SizeConfig.blockSizeVertical * 2,
                        horizontal: SizeConfig.blockSizeHorizontal * 2),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.white,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Type",
                            style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 3,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            widget.card.types.map((e) => e.type).join(", "),
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Blinker',
                              fontSize: SizeConfig.blockSizeVertical * 2,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                        vertical: SizeConfig.blockSizeVertical * 2,
                        horizontal: SizeConfig.blockSizeHorizontal * 2),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.white,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Weakness",
                            style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 3,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            widget.card.weaknesses
                                .map((e) => e.type + e.value)
                                .join(", "),
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Blinker',
                              fontSize: SizeConfig.blockSizeVertical * 2,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                        vertical: SizeConfig.blockSizeVertical * 2,
                        horizontal: SizeConfig.blockSizeHorizontal * 2),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.white,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Resistance",
                            style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 3,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            widget.card.resistances
                                .map((e) =>
                                    e.type == "" ? "None" : e.type + e.value)
                                .join(", "),
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Blinker',
                              fontSize: SizeConfig.blockSizeVertical * 2,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                        vertical: SizeConfig.blockSizeVertical * 2,
                        horizontal: SizeConfig.blockSizeHorizontal * 2),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.white,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Retreat Cost",
                            style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 3,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            widget.card.convertedRetreatCost.toString(),
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Blinker',
                              fontSize: SizeConfig.blockSizeVertical * 2,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}