Flutter 网格视图粘在列表视图内的底部

Question

我正在尝试使用 flutter 创建一个大学项目应用程序。我当前的代码如下。

import 'package:flutter/material.dart';
import 'package:mathappcd/constants/widgets_constants.dart';
import 'package:mathappcd/screens/sectionA.dart';
import 'package:mathappcd/screens/sectionB.dart';
import 'package:mathappcd/widgets/app_bar.dart';
import 'package:mathappcd/widgets/square_btn.dart';

extension ContextExtension on BuildContext {
  bool get isSmallScreen => MediaQuery.of(this).size.shortestSide < 500;
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustAppBar(
        title: "App",
      ),
      body: ListView(
        children: [
          const SizedBox(
            height: 300,
            child: Center(
              child: Text("Graph"),
            ),
          ),
          GridView.count(
            shrinkWrap: true,
            padding: const EdgeInsets.all(WidgetConstants.sqrBtnPadding),
            mainAxisSpacing: 20,
            crossAxisSpacing: 20,
            crossAxisCount: context.isSmallScreen ? 2 : 4,
            children: const [
              SquareBtn(
                text: "A",
                directTo: SectionA(),
              ),
              SquareBtn(
                text: "B",
                directTo: SectionB(),
              ),
              SquareBtn(
                text: "C",
                directTo: SectionA(),
              ),
              SquareBtn(
                text: "D",
                directTo: SectionB(),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

它给出的结果像this。
但我希望网格视图粘在底部，如此图片。

我使用 Column 和 spacer 实现了这一点，但是当屏幕高度不够时，它会给出类似 this 的错误。我尝试了很多其他方法，但未能得到我需要的确切结果。我希望它具有响应能力，并且当屏幕高度小于 SizedBox（图形）+ 网格视图的高度时，整个屏幕可以滚动。

请帮忙！预先感谢。

Answer 1

ListView 给出错误的输出，因为列表视图中的项目具有标准大小。每个项目的大小相同，也可以通过设置 itemExtent 参数来操作。

您可以使用单子滚动视图（如果子项很大，则可以消除 rendeflex 问题）和列来实现代码。

extension ContextExtension on BuildContext {
  bool get isSmallScreen => MediaQuery.of(this).size.shortestSide < 500;
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustAppBar(
        title: "App",
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(
              height: 300,
              child: Center(
                child: Text("Graph"),
              ),
            ),
            // Flexible is important as without it a gridview will try to take as much space as possible and will cause a renderflex issue
            Flexible(
              child: GridView.count(
                shrinkWrap: true,
                padding: const EdgeInsets.all(WidgetConstants.sqrBtnPadding),
                mainAxisSpacing: 20,
                crossAxisSpacing: 20,
                crossAxisCount: context.isSmallScreen ? 2 : 4,
                children: const [
                  SquareBtn(
                    text: "A",
                    directTo: SectionA(),
                  ),
                  SquareBtn(
                    text: "B",
                    directTo: SectionB(),
                  ),
                  SquareBtn(
                    text: "C",
                    directTo: SectionA(),
                  ),
                  SquareBtn(
                    text: "D",
                    directTo: SectionB(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}