GridView 上的 Ink.image 未显示在屏幕上

Question

在使用 Flutter Web 应用程序时，在以下页面中，不会显示 GridViewBuilder 上的 Ink.images。加载图像时我没有收到任何错误。网址正确，并且可以上网；没有 FutureBuilder 的 GridViewBuilder 上的另一个 Ink.image 可以正常工作。有什么想法吗？

// ignore_for_file: override_on_non_overriding_member

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:suppliers_admin/constants/controllers.dart';
import 'package:suppliers_admin/constants/style.dart';
import 'package:suppliers_admin/helpers/reponsiveness.dart';
import 'package:suppliers_admin/models/product.dart';
import 'package:suppliers_admin/models/supplier.dart';
import 'package:suppliers_admin/pages/products/controllers/products_page_controller.dart';
import 'package:suppliers_admin/routing/routes.dart';
import 'package:suppliers_admin/widgets/custom_text.dart';

class ProductsPage extends StatelessWidget {
  void navigateToEditSupplier(BuildContext context, [SupplierModel? supplier]) {
    menuController.changeActiveItemTo(editSuplierDisplayName);
    if (ResponsiveWidget.isSmallScreen(context)) Get.back();
    // Get.back();
    navigationController.navigateTo(editSupplierPageRoute, arguments: supplier);
  }

  final productsPageController = Get.put(ProductsPageController());

  @override
  Widget build(BuildContext context) {
    // final addSupplierButton = (context) => TextButton(
    //       onPressed: () {
    //         navigateToEditSupplier(context);
    //       },
    //       child: CustomText(
    //         text: "Agregar Tienda",
    //         size: 20,
    //         color: mainOrange,
    //       ),
    //     );

    if (productsPageController.dropdownValue.value == null)
      return Container(
        color: Colors.white,
        child: Center(
          child: Text('No hay tiendas.'),
        ),
      );
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          if (ResponsiveWidget.isSmallScreen(context))
            SizedBox(
              height: 56,
            ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                margin: EdgeInsets.only(
                    top: ResponsiveWidget.isSmallScreen(context) ? 0 : 16),
                child: CustomText(
                  text: productsPageDisplayName,
                  size: 24,
                  weight: FontWeight.bold,
                ),
              ),
            ],
          ),
          if (!ResponsiveWidget.isSmallScreen(context)) SizedBox(height: 20),
          SizedBox(
            height: 24,
          ),
          Expanded(
            child: Obx(() {
              return Column(
                children: [
                  DropdownButton<SupplierModel>(
                    value: productsPageController.dropdownValue.value,
                    elevation: 16,
                    underline: Container(
                      height: 2,
                      color: mainOrange,
                    ),
                    onChanged: (SupplierModel? newValue) {
                      productsPageController.dropdownValue.value = newValue;
                    },
                    items: productsPageController.suppliers
                        .map<DropdownMenuItem<SupplierModel>>(
                          (e) => DropdownMenuItem<SupplierModel>(
                            value: e,
                            child: Text(e.name),
                          ),
                        )
                        .toList(),
                  ),
                  SizedBox(height: 24),
                  Expanded(
                    child: FutureBuilder(
                        future: productsPageController.getProducts(),
                        builder: (context, snapshot) {
                          if (snapshot.connectionState ==
                              ConnectionState.done) {
                            return ProductsGrid(
                                products: snapshot.data as List<ProductModel>);
                          } else {
                            return Center(child: CircularProgressIndicator());
                          }
                        }),
                  ),
                ],
              );
            }),
          )
        ],
      ),
    );
  }
}

class ProductsGrid extends StatelessWidget {
  const ProductsGrid({Key? key, required this.products}) : super(key: key);
  final List<ProductModel> products;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.symmetric(horizontal: 30),
      itemCount: products.length,
      itemBuilder: (ctx, i) {
        final product = products[i];
        final images = product.imgsMap.values.toList();
        late final image;
        if (images.isNotEmpty && images[0] != '') {
         image = NetworkImage(images[0]);
        } else {
        image = AssetImage("assets/images/image_placeholder.jpg");
        }
        print(image);
        return Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                child: Ink.image(
                    //key: ValueKey(product.id),
                    image: image,
                    fit: BoxFit.fill,
                    width: 120,
                    height: 120,
                    child: InkWell(
                      onTap: () {
                        // navigateTo(
                        //   context,
                        //   editSupplierPageRoute,
                        //   editSuplierDisplayName,
                        //   supplier,
                        // );
                      },
                    ),
                    onImageError: (exception, stackTrace) {
                      print("Image Error:");
                      print(exception);
                    }),
              ),
              Text("Nombre: ${product.name}"),
              Text("Precio al por mayor: ${product.wholesalePrice.toString()}"),
              // CustomButton(
              //     text: 'Add Product',
              //     onTap: () {
              //       navigateTo(
              //         context,
              //         editProductPageRoute,
              //         editProductDisplayName,
              //         {
              //           "supplier": supplier,
              //           "product": null,
              //         },
              //       );
              //     }),
            ],
          ),
        );
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1.0,
        crossAxisSpacing: 0.0,
        mainAxisSpacing: 5,
        mainAxisExtent: 264,
      ),
    );
  }
}

我的颤振版本是

[✓] Flutter（Channel stable，2.5.1，在 Ubuntu 20.04.3 LTS 5.11.0-36-generic，语言环境 en_US.UTF-8）

Answer 1

试试下面的代码，希望它对我已经尝试过的代码有所帮助，就像Ink.image()一样。

  Center(
      child: GridView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 30),
        itemCount: 4,
        itemBuilder: (ctx, i) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Ink.image(
                      //key: ValueKey(product.id),
                      image: AssetImage('assets/images/visa.png'),
                      fit: BoxFit.fill,
                      width: 120,
                      height: 120,
                      child: InkWell(
                        onTap: () {
                          print("Image Pressed");
                        },
                      ),
                      onImageError: (exception, stackTrace) {
                        print("Image Error:");
                        print(exception);
                      }),
                ),
              ],
            ),
          );
        },
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1.0,
          crossAxisSpacing: 0.0,
          mainAxisSpacing: 5,
          mainAxisExtent: 264,
        ),
      ),
    ),

您的结果屏幕->

Answer 2

由于某种原因，Ink.image 不会显示图像。我将此小部件更改为以下内容：

 GestureDetector(
                child: MouseRegion(
                  cursor: SystemMouseCursors.click,
                  child: Image.network(
                    images[0],
                    height: 120,
                    width: 120,
                  ),
                ),
              ),