Flutter中GridView Builder构建APK后显示异常求助

问题说明 #

未构建APK时GridView显示正常，构建正式APK后出现显示异常，以下是相关代码，需修复该问题使APK构建后的GridView显示恢复正常。

原代码 #

body: SafeArea(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 15),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('Select Your City'),
        Expanded(child: GridView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          padding: const EdgeInsets.symmetric(horizontal: 20),
          itemCount: serviceDataList.length,
          itemBuilder: (ctx, i) {
            return GestureDetector(
              onTap: () {
                setState(() async {
                  if(isRedundentClick(DateTime.now())){
                    Fluttertoast.showToast(
                      msg: "hold on, processing",
                      toastLength: Toast.LENGTH_SHORT,
                      timeInSecForIosWeb: 1,
                      backgroundColor: Colors.red,
                      textColor: Colors.white,
                      fontSize: 16.0,
                    );
                    return;
                  }else{
                    SharedPreferences prefs = await SharedPreferences.getInstance();
                    prefs.setString('City_Id', serviceDataList[i]['city_id']);
                    prefs.setString('City_Name', serviceDataList[i]['city_name']);
                    prefs.setString('City_Lat', serviceDataList[i]['city_lat']);
                    prefs.setString('City_Long', serviceDataList[i]['city_long']);
                    print(serviceDataList[i]['city_id']);
                    print(serviceDataList[i]['city_name']);
                    int? rowsEffected2 = await dbHelper?.deletecart();
                    print(rowsEffected2);
                    Navigator.push(context, MaterialPageRoute(builder:(context)=>Navigation()));
                  }
                });
              },
              child: Card(
                  elevation: 4,
                  color: Colors.white,
                  child: Column(
                    children: [
                      Container(
                        height: 210,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20)),
                        margin: EdgeInsets.all(5),
                        padding: EdgeInsets.all(5),
                        child: Stack(
                          children: [
                            Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                ConstrainedBox(
                                  constraints: new BoxConstraints(
                                    maxHeight: 200.0,
                                  ),
                                  child: Expanded(
                                    child: Image.network(
                                      serviceDataList[i]['city_img'] ?? '',
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 35,
                        child: Container(
                          color: Colors.grey.shade300,
                          child: Center(
                            child: Text(
                              serviceDataList[i]['city_name'],
                              style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  )
              ),
            );
          },
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1.0,
            crossAxisSpacing: 5,
            mainAxisSpacing: 5,
            mainAxisExtent: 264,
          ),
        ),)
      ]
    )
  )
)

修复方案 #

1. 移除冲突的布局属性 #

GridView已被Expanded包裹，无需设置shrinkWrap: true，该属性在release模式下会导致布局计算异常。同时NeverScrollableScrollPhysics与Expanded组合可能引发滚动冲突，建议调整：

Expanded(child: GridView.builder(
  // 移除shrinkWrap: true
  physics: AlwaysScrollableScrollPhysics(), // 根据需求保留或调整
  padding: const EdgeInsets.symmetric(horizontal: 20),
  itemCount: serviceDataList.length,
  // 其余代码不变
))

2. 优化图片加载逻辑 #

release模式下网络图片易出现加载失败或布局异常，添加错误占位图与加载状态，并确保图片URL可访问：

Image.network(
  serviceDataList[i]['city_img'] ?? '',
  fit: BoxFit.fill,
  height: double.infinity,
  width: double.infinity,
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.broken_image, size: 100, color: Colors.grey);
  },
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(child: CircularProgressIndicator());
  },
)

3. 简化冗余布局结构 #

原布局中Stack与多层Column嵌套无意义，且ConstrainedBox配合Expanded在固定高度容器内易导致计算错误，简化图片容器：

Container(
  height: 210,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20)),
  margin: EdgeInsets.all(5),
  padding: EdgeInsets.all(5),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Image.network(
      serviceDataList[i]['city_img'] ?? '',
      fit: BoxFit.fill,
      height: double.infinity,
      width: double.infinity,
    ),
  ),
)

4. 检查编译配置与权限 #

• 确保android/app/src/main/AndroidManifest.xml添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• 检查pubspec.yaml中未禁用图片缓存相关配置，确保release模式下资源加载正常。

内容的提问来源于stack exchange，提问作者Red Player Gaming