Flutter Gridview.builder 不可见

Question

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 并更改 window 的大小。我尝试使用上面的代码，但问题是网格根本不可见并且页面是空白的。

或

是否有任何其他方法可以根据大小动态设置 crossAxisCount？

Answer 1

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

包装flutter框架自身提供的widget。示例：

 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.There 是名为 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
                );
         
        },
      ),
    );

Flutter Gridview.builder 不可见

Flutter Gridview.builder is not visible

flutter

flutter-layout

flutter-web