Flutter：RenderViewport 不支持使用 GridView 在 Dialog 中返回固有尺寸错误

Question

我正在开发一个 Flutter 应用程序，其中有一个过滤按钮，可以打开一个包含各种排序和过滤选项的对话框。该对话框包含一个用于显示过滤器选项的

GridView.builder

。但是，当我运行该应用程序时，遇到以下错误：

Exception has occurred.
FlutterError (RenderViewport does not support returning intrinsic dimensions.
Calculating the intrinsic dimensions would require instantiating every child of the viewport, which defeats the point of viewports being lazy.
If you are merely trying to shrink-wrap the viewport in the main axis direction, consider a RenderShrinkWrappingViewport render object (ShrinkWrappingViewport widget), which achieves that effect without implementing the intrinsic dimension API.)

这是我正在使用的代码：

import 'package:SolidCheck/core/constants/app_colors.dart';
import 'package:flutter/material.dart';

final GlobalKey _buttonKey = GlobalKey();

Widget buildFilter(BuildContext context) {
  return Container(
    height: 50.0,
    width: 50.0,
    decoration: BoxDecoration(
      color: AppColors.kGreyColor.withOpacity(0.2),
      borderRadius: BorderRadius.circular(10.0),
    ),
    child: Center(
      child: IconButton(
        key: _buttonKey,
        icon: const Icon(Icons.tune_outlined),
        onPressed: () {
          _showOptionsDialog(context);
        },
      ),
    ),
  );
}

void _showOptionsDialog(BuildContext context) {
  final filterOptions = ['Option 1', 'Option 2', 'Option 3'];

  showDialog(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('Options'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: AppColors.kBlueColor,
              child: const ListTile(
                title: Text('Sort By:', style: TextStyle(color: Colors.white)),
              ),
            ),
            ListTile(
              title: const Text('Date Created - Newest First'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            ListTile(
              title: const Text('Date Created - Oldest First'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            ListTile(
              title: const Text('Alphabetical (A-Z)'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            ListTile(
              title: const Text('Alphabetical (Z-A)'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            Container(
              color: AppColors.kBlueColor,
              child: const ListTile(
                title: Text('Filter:', style: TextStyle(color: Colors.white)),
              ),
            ),
            ListTile(
              title: const Text('Status'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            SizedBox(
              height: 200,
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                itemCount: filterOptions.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(filterOptions[index]),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  );
                },
              ),
            ),
            ListTile(
              title: const Text('Organization'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Close'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

我尝试使用

SingleChildScrollView

但遇到了同样的错误。如何解决此问题以正确显示其中包含

GridView

的对话框？

---

Answer 1

这是一个众所周知的问题，您需要为您的

Listview

使用明确的宽度

return AlertDialog(
  title: const Text('Options'),
  content: SizedBox(
    width: 400.0,
    child: GridView(
...