簡(jiǎn)介

• 應(yīng)用場(chǎng)景是包裹列表。一個(gè)包裹包含多個(gè)商品，商品還有圖片，所以在列表中以九宮格圖片表示。類(lèi)似這樣的。

例子

• 第一層理解就是多張圖片的簡(jiǎn)單示意圖。9張已經(jīng)很多了，再多就太小了。所以就算圖片多于9張，也只顯示9張。

• 第二層意思是潛在提示有幾個(gè)商品。這一層會(huì)存在爭(zhēng)議。一種情況是商品多于9個(gè)，九宮格最多顯示9個(gè)，這種潛在意思自然就沒(méi)了。另外一種情況是圖片缺失。比如5個(gè)商品，其中2個(gè)商品沒(méi)有圖片，那么展示出來(lái)就只有3個(gè)圖片。這個(gè)時(shí)候，這層意思自然就沒(méi)了。

• 為了消除這種爭(zhēng)議，所以增加了一個(gè)數(shù)量顯示。這樣的話就消除了商品數(shù)量的爭(zhēng)議。

思路

• 參數(shù)有兩個(gè)，一個(gè)代表圖片數(shù)組，一個(gè)代表商品數(shù)量

  final List urlList;
  final int itemCount;

• 圖片應(yīng)該是正方形，位置個(gè)數(shù)為1或4或9，圖片尺寸是組件尺寸的1倍或者二分之一或者三分之一

    double actualSize = size ?? 82.r;
    int actualLength = min(itemCount, 9);
    double itemSize = actualSize;
    if (actualLength > 4) {
      itemSize = actualSize / 3;
    } else if (actualLength > 1) {
      itemSize = actualSize / 2;
    }

• 實(shí)際顯示的圖片，要么全部（圖片較少）；要么一部分

    int actualLength = min(itemCount, 9);

    List subUrlList = urlList;
    if (urlList.length > actualLength) {
      subUrlList = urlList.sublist(0, actualLength);
    }

• 如果出現(xiàn)商品沒(méi)有圖片的情況，用空字符串代替；我們做了一個(gè)網(wǎng)絡(luò)圖片組件，當(dāng)url為空的時(shí)候，會(huì)提供一個(gè)占位圖。

    /// 補(bǔ)充空的圖片,用來(lái)顯示占位圖
    /// urlList中如果個(gè)數(shù)不足actualLength，用占位圖替代
    int emptyNumber = 0;
    if (actualLength > subUrlList.length) {
      emptyNumber = actualLength - subUrlList.length;
    }
    for (int i = 0; i < emptyNumber; i++) {
      subUrlList.add("");
    }

• 因?yàn)閳D片有可能是一行，或者兩行，或者三行，所以用Wrap組件是最方便的。

• 另外Wrap的默認(rèn)對(duì)齊方式是靠左，改成中間對(duì)齊會(huì)美觀一些，

• 商品數(shù)量疊加顯示，就用了一個(gè)stack組件

代碼實(shí)現(xiàn)

class NineGridImageWidget extends StatelessWidget {
  const NineGridImageWidget({
    super.key,
    required this.urlList,
    required this.itemCount,
    this.size,
  });

  final List urlList;
  final int itemCount;
  final double? size;

  @override
  Widget build(BuildContext context) {
    double actualSize = size ?? 82.r;
    int actualLength = min(itemCount, 9);
    double itemSize = actualSize;
    if (actualLength > 4) {
      itemSize = actualSize / 3;
    } else if (actualLength > 1) {
      itemSize = actualSize / 2;
    }
    List subUrlList = urlList;
    if (urlList.length > actualLength) {
      subUrlList = urlList.sublist(0, actualLength);
    }

    /// 補(bǔ)充空的圖片,用來(lái)顯示占位圖
    /// urlList中如果個(gè)數(shù)不足actualLength，用占位圖替代
    int emptyNumber = 0;
    if (actualLength > subUrlList.length) {
      emptyNumber = actualLength - subUrlList.length;
    }
    for (int i = 0; i < emptyNumber; i++) {
      subUrlList.add("");
    }

    return Container(
      width: actualSize,
      height: actualSize,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: ColorUtils.c_f8f8f8,
        borderRadius: BorderRadius.circular(4.r),
      ),
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child: Wrap(
              alignment: WrapAlignment.center,
              children: subUrlList.map((url) {
                return SizedBox(
                  width: itemSize,
                  height: itemSize,
                  child: NetworkImageWidget(
                    url: url,
                    width: itemSize,
                    height: itemSize,
                    fit: BoxFit.fill,
                    placeholder: IconUtil.placeholderOrder,
                  ),
                );
              }).toList(),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            height: actualSize / 4,
            child: Container(
              decoration: BoxDecoration(
                color: ColorUtils.c_666666.withValues(alpha: 0.3),
              ),
              child: Center(
                child: Text("${"quantity".tr}: $itemCount", style: StyleUtils.ts_ff_10_400.copyWith(color: Colors.white)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

應(yīng)用情況

• 一張圖的時(shí)候，和普通的單張圖片沒(méi)啥區(qū)別

  
  
  1張圖

• 一個(gè)商品，但是沒(méi)有圖，就只有一個(gè)占位圖

  
  
  沒(méi)有圖

• 三個(gè)商品，居中顯示會(huì)好一些，靠左的話，第二排會(huì)難看一點(diǎn)。

  
  
  3個(gè)商品

• 2個(gè)商品，一半空著，但是圖片改長(zhǎng)方形也不好。這里疊加數(shù)量顯示，反而會(huì)好點(diǎn)。

  
  
  2個(gè)商品

• 商品數(shù)量多于9，圖片也多于9，會(huì)展示9個(gè)，感覺(jué)就比較好。

  
  
  圖片多于9

• 商品數(shù)量多于9，但是多個(gè)商品缺少圖片，數(shù)量顯示可以消除歧義

  
  
  商品多于圖片

• 用占位圖表示缺圖的商品，這里表示有2個(gè)商品，但是有一個(gè)商品缺少圖片，用占位圖替代。疊加數(shù)量顯示后，意思更明確。

  
  
  占位圖

• 圖片還是正方形比較好，長(zhǎng)方形感覺(jué)不好。這張圖尺寸是正方形的，但是原圖是長(zhǎng)方形的，多于部分是白色，感覺(jué)就不是很好。所以就算是2個(gè)的情況，寧可空一半，也要保證圖片是正方形的。

  
  
  長(zhǎng)方形圖片不好

• 5張圖，居中顯示會(huì)好點(diǎn)，靠左感覺(jué)差點(diǎn)意思。

  
  
  5張圖的例子

小結(jié)

• 本來(lái)只是多張圖的顯示，按照1,4,9的思路去做，一個(gè)Wrap組件就搞定了。（這是最好的）

• 后來(lái)加入了商品數(shù)量的爭(zhēng)議，就把簡(jiǎn)單的事情復(fù)雜化了，某些情況下就帶來(lái)了爭(zhēng)議和不一致。（個(gè)人感覺(jué)還是不要帶入商品個(gè)數(shù)）

• 無(wú)圖商品是否要給個(gè)默認(rèn)圖，其實(shí)也是值得商榷的。本人始終認(rèn)為把多圖的展示和商品數(shù)量糾結(jié)在一起，始終不好。

• 這里把無(wú)圖商品添加在末尾，以占位圖的形式表示，其實(shí)也不好。因?yàn)闊o(wú)圖的商品可能出現(xiàn)在中間某一個(gè)。對(duì)應(yīng)關(guān)系并不準(zhǔn)確。

• 如果需要對(duì)應(yīng)，那么這里就要返回商品列表。然后遍歷商品列表，無(wú)圖商品用空字符串占位，那么占位圖的位置就是準(zhǔn)確的，也還算有點(diǎn)意義。但是為了這么點(diǎn)事，還要多返回一個(gè)商品列表，存在很大的流量浪費(fèi)，得不償失。

• 最后，個(gè)人還是感覺(jué)應(yīng)該回歸簡(jiǎn)單，不要考慮商品數(shù)量這個(gè)無(wú)關(guān)緊要的因素，簡(jiǎn)單一個(gè)多圖的展示就好。數(shù)據(jù)上也只要一個(gè)url數(shù)組就行，表示單個(gè)或者多個(gè)商品就可以了。

• 列表頁(yè)是模糊展示信息的地方，在一些不必要的細(xì)節(jié)上糾結(jié)，反而不好。