如何为商品详情页选中索引的预览设置条件，避免默认图混入小图行？

你的问题根源在于初始选中值设置错误、图片列表包含了不该有的项，以及顶部预览的判断逻辑不对，按下面的步骤修改即可解决：

1. 修正初始状态和图片列表 #

把selectedImage初始值改成-1（用来标记未选中任何小图的状态），同时imagePaths只保留需要在下方展示的2张商品图，删掉默认图的路径：

int selectedImage = -1;

List<String> imagePaths = [
  "images/tp1.png",
  "images/tp3.png"
];

2. 调整顶部预览的判断逻辑 #

原来的判断条件selectedImage != 0不符合需求，改成判断selectedImage != -1，这样初始状态会显示默认图，选中小图后自动切换为对应商品图：

Container(
  height: 360,
  width: double.infinity,
  color: const Color(0xffefefef),
  child: Padding(
    padding: const EdgeInsets.only(right: 30),
    child: selectedImage != -1
        ? Image.asset(
            imagePaths[selectedImage],
            fit: BoxFit.cover,
          )
        : Image.asset(
            'images/wonder_woman.png',
            fit: BoxFit.cover,
          ),
  ),
),

3. 小图行自动只显示2张图 #

因为imagePaths现在只有2个元素，List.generate会自动生成2个小预览组件，不会再出现默认图。

修改后的完整代码片段 #

// 状态变量
int selectedImage = -1;

List<String> imagePaths = [
  "images/tp1.png",
  "images/tp3.png"
];

// 顶部预览容器
Container(
  height: 360,
  width: double.infinity,
  color: const Color(0xffefefef),
  child: Padding(
    padding: const EdgeInsets.only(right: 30),
    child: selectedImage != -1
        ? Image.asset(
            imagePaths[selectedImage],
            fit: BoxFit.cover,
          )
        : Image.asset(
            'images/wonder_woman.png',
            fit: BoxFit.cover,
          ),
  ),
),

// 下方小图行
Padding(
  padding: const EdgeInsets.only(left: 15, top: 12),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      ...List.generate(
        imagePaths.length,
        (index) => buildSmallPreview(index),
      ),
    ],
  ),
),

// 小预览组件
GestureDetector buildSmallPreview(int index) {
  return GestureDetector(
    onTap: () {
      setState(() {
        selectedImage = index;
      });
    },
    child: Container(
      margin: const EdgeInsets.only(right: 15),
      padding: const EdgeInsets.all(8),
      height: 80,
      width: 80,
      decoration: BoxDecoration(
        color: const Color(0xffefefef),
        borderRadius: BorderRadius.circular(4),
      ),
      child: Image.asset(
        imagePaths[index],
        width: 70,
        height: 70,
      ),
    ),
  );
}

修改后，初始状态顶部显示默认的wonder_woman图，下方仅展示2张商品小图，点击任意小图后顶部会切换为对应的商品图，完全符合需求。

内容的提问来源于stack exchange，提问作者Divya