我正在创建一个产品详细信息页面。第一个容器应该在下面的行中显示所选产品的预览。
下面的行有2个图像。运行代码应显示预览容器以显示默认资产图像,直到用户选择下面的图像之一。默认图像不应位于最下面的行。
我试过了,但默认图像也显示在行中。如何实现这一点?
这就是我得到结果:
行中的第三个是默认预览图像,它不应该在该行中,它应该只显示在容器中,直到前两个被选中。
代码:
int selectedImage = 2;
List<String> imagePaths = [
"images/tp1.png",
"images/tp3.png",
"images/tp2.png"
];
Container(
height: 360,
width: double.infinity,
color: const Color(0xffefefef),
child: Padding(
padding: const EdgeInsets.only(right: 30),
child: selectedImage != 0
? 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,
),
),
);
}
1条答案
按热度按时间bttbmeg01#
在索引0处的列表中添加默认图像并生成
currentImageIndex = 0
如果
index == 0
,则显示Container()
而不是图像: