如何将GridView限制为屏幕的大小并将内部元素调整到不同设备上？

发布于 2025-02-13 08:32:49 字数 1695 浏览 0 评论 0原文

我有一个GridView，可以从3-12个元素转移，我希望所有这些元素都可以在屏幕上放入而不滚动。

我在Pixel 2个设备和一个尺寸为6.7的设备上进行了测试。使用childaspectratio我选择了适合我这两个设备child aspectratio的比率：（1/0.8），。当元素不占据整个屏幕时，还可以禁用滚动以进行中心。

shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

但是这种方法对我来说似乎不是很漂亮，在像素2中有12个元素，它们不再适合。您能告诉我如何根据需要并仅占据屏幕空间而使GridView内部的传输元素收缩？

      Expanded(
            child: Container(
            // height: size   * 2,
            // padding: EdgeInsets.all(5),
            color: Colors.red,
            child: Center(
              child: GridView(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 5,
    crossAxisSpacing: 5,   
    childAspectRatio: (1 / 0.8),
    
  ),
  
  children: [
    Padding(
padding: const EdgeInsets.all(5),
child: Container( color: Colors.grey,
child: 

  Image.network('https://picsum.photos/250?image=1'), padding: EdgeInsets.all(3),
    ),
    ),
   Padding(
padding: const EdgeInsets.all(5),
child: Container( color: Colors.grey,
child: 

  Image.network('https://picsum.photos/250?image=1'), padding: EdgeInsets.all(3),
    ),
    ),
    Padding(
padding: const EdgeInsets.all(5),
child: Container( color: Colors.grey,
child: 

  Image.network('https://picsum.photos/250?image=1'), padding: EdgeInsets.all(3),
    ),
    ),
         
  ],
        
),
            ),        
            ),
          flex:10         
          ),

GridView is located in the red area

原文

I have a GridView in which I will transfer from 3-12 elements, I would like all these elements to fit on the screen without scrolling.

I tested on Pixel 2 devices and a device with a size of 6.7. Using childAspectRatio I selected the ratio that suits me for these two devices childAspectRatio: (1 / 0.8),. And also disabled the scroll for centering when the elements do not occupy the entire screen.

shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

But this method does not seem very beautiful to me, and with 12 elements in Pixel 2, they no longer fit. Could you tell me how to make the transmitted elements shrink inside the GridView depending on the need and occupy only the screen space ?

      Expanded(
            child: Container(
            // height: size   * 2,
            // padding: EdgeInsets.all(5),
            color: Colors.red,
            child: Center(
              child: GridView(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 5,
    crossAxisSpacing: 5,   
    childAspectRatio: (1 / 0.8),
    
  ),
  
  children: [
    Padding(
padding: const EdgeInsets.all(5),
child: Container( color: Colors.grey,
child: 

  Image.network('https://picsum.photos/250?image=1'), padding: EdgeInsets.all(3),
    ),
    ),
   Padding(
padding: const EdgeInsets.all(5),
child: Container( color: Colors.grey,
child: 

  Image.network('https://picsum.photos/250?image=1'), padding: EdgeInsets.all(3),
    ),
    ),
    Padding(
padding: const EdgeInsets.all(5),
child: Container( color: Colors.grey,
child: 

  Image.network('https://picsum.photos/250?image=1'), padding: EdgeInsets.all(3),
    ),
    ),
         
  ],
        
),
            ),        
            ),
          flex:10         
          ),

GridView is located in the red area