如何让我的 gridView 滚动占据 Flutter 中的整个页面？

Question

我有一个 gridView，它在滚动时必须占据整个页面。它目前只在页面的下半部分滚动，如下所示。

当我滚动包含元素的网格视图时，只有页面的底部在滚动

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: DesignCourseAppTheme.nearlyWhite,
        child: PageView(
          scrollDirection: Axis.vertical,
          children: [
            Scaffold(
              backgroundColor: DesignCourseAppTheme.nearlyWhite,
              body: Container(
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: MediaQuery.of(context).padding.top,
                    ),
                    getAppBarUI(),
                    Expanded(
                      child: Container(
                        height: MediaQuery.of(context).size.height,
                        child: Column(
                          children: <Widget>[
                            getCategoryUI(),
                            Flexible(
                              child: getPopularCourseUI(),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

这里的gridView被称为：

  Widget getPopularCourseUI() {
    return Padding(
      padding: const EdgeInsets.only(top: 8.0, left: 18, right: 16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Featured Games',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontFamily: "Netflix",
              fontWeight: FontWeight.w800,
              fontSize: 24,
              letterSpacing: 0.27,
              color: HexColor('FF8C3B'),
            ),
          ),
          Flexible(
            child: GamesGridView(
              callBack: () {},
            ),
          )
        ],
      ),
    );
  }

感谢您的帮助！

Answer 1

1. 您可以用ListView 包裹Scaffold body 内的小部件。

2. 那么您应该从您的Column 中删除所有 flex 小部件。

3. 您的GridView 应包括

shrinkWrap: true
物理: const ClampingScrollPhysics()

参考这个，

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white, //DesignCourseAppTheme.nearlyWhite,
      child: PageView(
        scrollDirection: Axis.vertical,
        children: [
          Scaffold(
            body: SafeArea(
              child: ListView(
                padding: EdgeInsets.symmetric(horizontal: 30),
                children: <Widget>[
                  getAppBarUI(),
                  getCategoryUI(),
                  getPopularCourseUI(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget getCategoryUI(){
    return SizedBox(
      height: 300,
      child: PageView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 40.0,horizontal: 30.0),
            child: Material(
              color: Colors.blue,
              elevation: 3.0,
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 40.0,horizontal: 30.0),
            child: Material(
              color: Colors.green,
              elevation: 3.0,
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
        ],
      ),
    );
  }

  Widget getAppBarUI(){
    return Text(
      'Games for Fun!',
      style: TextStyle(
        fontFamily: "Netflix",
        fontWeight: FontWeight.w800,
        fontSize: 32.0,
        letterSpacing: 0.27,
        color: Colors.red, //HexColor('FF8C3B'),
      ),
    );
  }

  Widget getPopularCourseUI() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Featured Games',
          style: TextStyle(
            fontFamily: "Netflix",
            fontWeight: FontWeight.w800,
            fontSize: 24.0,
            letterSpacing: 0.27,
            color: Colors.red, //HexColor('FF8C3B'),
          ),
        ),
        const SizedBox(height: 8.0),
        GamesGridView(
          callBack: () {},
        )
      ],
    );
  }
}

class GamesGridView extends StatelessWidget {
  final VoidCallback callBack;

  const GamesGridView({Key key, this.callBack}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      shrinkWrap: true, //TODO: must be included
      physics: const ClampingScrollPhysics(), //TODO: must be included
      crossAxisCount: 2,
      mainAxisSpacing: 50.0,
      crossAxisSpacing: 50.0,
      children: <Widget>[
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
      ],
    );
  }
}

这里getCategoryUI也可以水平滚动。

Answer 2

如果我正确理解了您的问题，则使用带有 SliverAppBar 和 SliverGrid 的 CustomScrollView 应该可以满足您的要求：

class GridViewIssue extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Center(child: Text('Banner')),
          expandedHeight: 250.0,
        ),
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: Text('grid item $index'),
              );
            },
            childCount: 8
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2
          )
        )
      ],
    );
  }
}