Flutter Gridview.builder 不可见答案

【问题标题】：Flutter Gridview.builder is not visibleFlutter Gridview.builder 不可见
【发布时间】：2021-08-09 23:13:42
【问题描述】：

import 'package:flutter/material.dart';

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  final List<String> _wallpapers = [
    "wall-1.jpg",
    "wall-2.png",
    "wall-3.jpg",
    "wall-4.jpg",
    "wall-5.jpg",
    "wall-6.png",
    "wall-7.png",
    "wall-8.jpg"
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).backgroundColor,
      child: LayoutBuilder(builder: (context, constraints) {
        print("height:${constraints.maxHeight}");
        return SingleChildScrollView(
            child: ConstrainedBox(
          constraints: constraints,
          child: Column(
            children: [
              SizedBox(
                  height: constraints.maxHeight * 0.4,
                  width: constraints.maxWidth,
                  child: Container(
                    color: Colors.red,
                  )),
              const Divider(
                color: Colors.black,
              ),
              Expanded(
                child: GridView.builder(
                   physics: NeverScrollableScrollPhysics(),
                    itemCount: _wallpapers.length,
                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 5,
                    ),
                    itemBuilder: (_, index) {
                      return Container(
                        height: constraints.maxHeight * 0.35,
                        width: constraints.maxWidth * 0.25,
                        margin: const EdgeInsets.all(20.0),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: Image.asset(
                                  "assets/wallpaper/${_wallpapers[index]}",
                                ).image,
                                fit: BoxFit.cover)),
                      );
                    }),
              ),
            ],
          ),
        ));
      }),
    );
  }

我正在 Flutter Web 中实现 Gridview.builder 以通过改变窗口大小来更改 crossAxisCount。我尝试使用上面的代码，但问题是网格根本不可见并且页面是空白的。

或

有没有其他方法可以根据大小动态设置 crossAxisCount？。

【问题讨论】：

您尝试过使用MediaQuery 吗？我认为你不需要如此复杂的树来改变轴数，GridView.extent 已经提供了这一点。尝试添加您要实现的目标的屏幕截图。
另外，您的maxCrossAxisExtent 似乎是一个错字，它定义了您的网格项目的最大宽度，您可能打算使用maxCrossAxisExtent: 300 或类似的东西。
感谢您的帮助。我可以使用 Wrap Widget 来实现它..

标签： flutter flutter-layout flutter-web

【解决方案1】：

如果您不想指定交叉轴计数，可以使用这些小部件。

flutter 框架本身提供的 Wrap 小部件。示例：

 Container(
                width: MediaQuery.of(context).size.width,
                child: Wrap(
                  crossAxisAlignment: WrapCrossAlignment.start,
                  alignment: WrapAlignment.start,
                  children: List.generate(
                  20,
                    (childIndex) {
                    
                     return Container(height: 100 , width: 100);
                    },
                  ),
                ),

2.有一个名为 responsive_grid 的包，您必须在其中提供交叉轴计数。它需要 desiredItemWidth 来确定网格视图中子项的宽度。
https://pub.dev/packages/responsive_grid

下面是它的简单用法：

    return ResponsiveGridList(
      desiredItemWidth: _width * 0.3,
      children: List.generate(
        20
        (index) {

         return Container(height: _height*0.1,
                  color: Colors.red
                );
         
        },
      ),
    );

【讨论】：