Flutter - 网格视图，如果所有项目都在屏幕上可见，则停止滚动答案

【问题标题】：Flutter - Grid view, stop scrolling if all items visible on screenFlutter - 网格视图，如果所有项目都在屏幕上可见，则停止滚动
【发布时间】：2021-08-12 16:25:27
【问题描述】：

我有一个网格视图，我想要如下。在平板电脑（大屏幕）上运行时，由于可以一次看到所有项目，我想禁用滚动。但是，对于手机，由于无法一次看到所有项目，因此需要可滚动。

要停止滚动，我使用：

physics: NeverScrollableScrollPhysics(),

但是，如果所有项目都在屏幕上可见，我只想要这个。我怎样才能检测到这个？或者有没有其他方法可以实现我想要的。

添加代码：

 child: GridView.count(

      // physics: NeverScrollableScrollPhysics(),

      crossAxisSpacing: 15,
      mainAxisSpacing: 15,
      crossAxisCount: 5,

      children: List.generate(12, (index) {

        double borderWidth = 0;

        if(vehiclesList[index].isSelected){
          borderWidth = 6;
        }else{
          borderWidth = 1;
        }

        return GestureDetector(
          onTap: (){
            // print('2124: ${vehiclesList[index].name} tapped');
            if(vehiclesList[index].isSelected){
              vehiclesList[index].isSelected = false;

              // get index of item to delete:
              int indexToDelete = 0;

              for(var i = 0; i < selectedItemsList.length; i++){
                if(selectedItemsList[i].name == vehiclesList[index].name){
                  indexToDelete = i;
                }
              }
              selectedItemsList.removeAt(indexToDelete);

            }else{
              vehiclesList[index].isSelected = true;
              selectedItemsList.add(vehiclesList[index]);
            }
            setState(() {

            });
          },
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(
               width: borderWidth,
                color: Colors.purple
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: Center(
                  child: Image(
                  image: AssetImage(vehiclesList[index].imageAsset),

                ),
              ),
            ),
          ),
        );
      }),
    ),

谢谢

【问题讨论】：

你能添加它的示例代码吗？你在使用 Gridview.count 还是什么？
已添加代码。谢谢

标签： flutter flutter-layout

【解决方案1】：

将此代码放在Widget build(BuildContext context) 之后

// 相当于 Android 上的“smallestWidth”限定符。

var shortestSide = MediaQuery.of(context).size.shortestSide;

// 判断是否应该使用移动布局，这里是600 // 典型 7 英寸平板电脑的常见断点。

final bool useMobileLayout = shortestSide < 600;

所以你可以这样做

physics:useMobileLayout? NeverScrollableScrollPhysics(): scrolling...,

【讨论】：