如何防止gridview在flutter中缩小？

Question

我正在用 flutter 制作一个应用程序。

我想使用 GridView 显示一些项目列表，连续显示 3 个项目。并根据设备灵活调整大小。

但实际上我编写的代码无法正常工作。

当设备屏幕有些窄时，它们会缩小并像这样乱七八糟。

但是当设备屏幕变宽时，图像的大小并没有扩大，只是项目之间的空间扩大了，如下所示。

我想让图片充满屏幕。我怎样才能做到？

感谢您关心我的问题，对于图片中的外语问题，我深表歉意。

return Scaffold(
  appBar: AppBar(
    title: Text("${getUnitBookClassTitlebyTag(tag!)} 목록"),
    backgroundColor: Color(COLOR_PRIMARY),
    centerTitle: true,
  ),
  body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: CustomScrollView(
        primary: false,
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(20),
            sliver: SliverGrid.count(
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: 3,
              children: <Widget>[
                for (UnitBook _curUnitBook in unitBookList!)
                  UnitBookDisplay(
                      bookData: _curUnitBook,
                      imageHeight: null,
                      imageWidth: null),
              ],
            ),
          ),
        ],
      )),
);

/***

Widget build(BuildContext context) {
//bookDataReplace();
//debugPrint('cover : ${bookData!.coverUrl!}');
//debugPrint('cover : ${bookData!.coverUrl!.replaceAll('\/', '/')}' );
if (bookData == null) debugPrint('bookData is null!!');
return Column(
  children: [
    GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) =>
                DetailScreen(book: convertUnitBooktoBook(bookData!)),
          ),
        ); 
      },
      child: Expanded(
        child: Container(
          margin: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 10.0),
          height: imageHeight,
          width: imageWidth,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black54,
                offset: Offset(0.0, 4.0),
                blurRadius: 6.0,
              ),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: (bookData!.coverUrl == null)
                ? (Image(
                    image: AssetImage('images/default_book_cover_image.png'),
                    fit: BoxFit.cover,
                  ))
                : (Image.network(
                    '${bookData!.coverUrl!.replaceAll('\/', '/')}',
                    fit: BoxFit.cover,
                  )),
          ),
        ),
      ),
    ),
    SizedBox(
      child: Text((bookData!.title == null) ? 'unNamed' : bookData!.title!,
          overflow: TextOverflow.ellipsis),
      width: imageWidth,
    ),
  ],
);

}

Answer 1

在使用SliverGrid或GirdView时，childAspectRatio决定其children大小。虽然 children 在

上有固定高度

 child: Expanded(
        child: Container(
          margin: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 10.0),
          height: imageHeight, //<- here

仅当 SliverGrid 无法为 children.

提供足够的高度时才会发生底部 RenderFlex 溢出

您可以尝试从此处删除固定高度 UI 不会遇到任何问题，但为了更好的设计目的，请在 SliverGrid.count 上使用 childAspectRatio，例如

  SliverGrid.count(
              crossAxisCount: 3,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 3 / 4,// width/height : check and change the way you want. 
              children: ....

另外，你可以试试Wrap。

如何防止gridview在flutter中缩小？

How to prevent gridview from shrinking in flutter?

flutter

dart

gridview