单击下一个图像时从上一个图像中删除边框并将其设置为主图像。扑

Question

从下图中，我想在页面加载时在第一张图像周围设置边框，并将其设置为主图像。单击下一个图像后，必须将其设置为主图像并在其周围设置边框。我试图在颤动中实现这一点，并且图像列表是使用 ListView 构建器构建的。任何人都可以提供帮助。 heroImage 小部件取决于从图像小部件中选择的图像，并且在页面加载时，必须将 heroImage 设置为图像小部件中的第一张图像。

// Selected image tile being used in the listView
class SelectedImageTile extends StatelessWidget {
  final GestureTapCallback onTap;
  final String imageAsset;
  final BoxDecoration decoration;

  SelectedImageTile({
    this.onTap,
    this.imageAsset,
    this.decoration
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(2),
        decoration: decoration,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(6),
          child: Image.asset(
            imageAsset,
            fit: BoxFit.cover,
            height: 60,
            width: 60,
          ),
        ),
      ),
    );
  }
}

Widget heroImage() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Image.asset(
        'assets/image-1.png',
        height: 350,
        width: MediaQuery.of(context).size.width,
        fit: BoxFit.cover
      ),
    );
 }

  Widget images() {
    return SizedBox(
      height: 75,
      child: ListView.builder(
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int index) {
          final galleryImage = galleryImages[index];

          return SelectedImageTile(
            imageAsset: galleryImage,
            onTap: () {},
            decoration: BoxDecoration(
                border: Border.all(color: EShopColors.primary),
                borderRadius: BorderRadius.circular(8)
            ),
          );
        },
        itemCount: galleryImages.length,
      ),
    );
  }

Answer 1

将images() 小部件转换为StateFulWidget

创建一个变量selectedImage 并将其设置为被点击的图像的URL（当被点击时）

最后在图片平铺的边框上添加一个条件。

class Images extends StatefulWidget {
  @override
  _ImagesState createState() => _ImagesState();
}

class _ImagesState extends State<Images> {
    var selectedImage = galleryImages[0]

  @override
  Widget build(BuildContext context) {
    return SizedBox(
    height: 75,
    child: ListView.builder(
      physics: ClampingScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemBuilder: (BuildContext context, int index) {
        final galleryImage = galleryImages[index];

        return SelectedImageTile(
          imageAsset: galleryImage,
          onTap: () {
            this.selectedImage = galleryImage;
            setState(() {});
          },
          decoration: BoxDecoration(
              border:galleryImage==this.selectedImage? Border.all(color: EShopColors.primary):null,
              borderRadius: BorderRadius.circular(8)),
        );
      },
      itemCount: galleryImages.length,
    ),
  );
  }
}