android 如何在gridview builder中使收藏夹按钮可单击

k5ifujac  于 2023-01-24  发布在  Android
关注(0)|答案(1)|浏览(120)

我有一个收藏夹按钮在gridview.builder,但我想当我点击一个特定的收藏夹按钮(它变成红色)和其他人不会转...因为当我点击一个特定的收藏夹按钮,它影响所有。我需要帮助如何解决它。
我是新的Flutter。请我会喜欢有人来指导我...我真的需要一个导师(请任何人)

class HomeItemsWidget extends StatefulWidget {
  const HomeItemsWidget({
    Key? key,
  }) : super(key: key);

  @override
  State<HomeItemsWidget> createState() => _HomeItemsWidgetState();
}

class _HomeItemsWidgetState extends State<HomeItemsWidget> {
  bool isIconView = false;
`your text`
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: gridImages.length,
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          mainAxisExtent: 231.5,
          crossAxisCount: 2),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          decoration: BoxDecoration(`your text`
            color: Appcolors.whiteColor,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Padding(
            padding: const EdgeInsets.only(left: 12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                IconButton(
                onPressed: () {
                  toggleIconView();
                },
                icon: Icon(isIconView ? Icons.favorite : Icons.favorite_border),
                color: isIconView ? Colors.red : Colors.red ,
                  ),
                Align(
                  alignment: Alignment.center,
                  child: Image.asset(
                    "${gridImages[index]["image"]}",
                    height: 70.0,
                  ),
                ),
                const SizedBox(height: 20.0),
                Text(
                  "${gridImages[index]["heading"]}",
                  style: GoogleFonts.poppins(
                      color: Appcolors.primaryColor,
                      fontSize: 12.0,
                      fontWeight: FontWeight.w500),
                ),
                const SizedBox(height: 4.0),
                Text(
                  "${gridImages[index]["title"]}",
                  style: GoogleFonts.poppins(
                      color: Appcolors.greyColor,
                      fontSize: 16.0,
                      fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 12.0),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "${gridImages[index]["price"]}",
                      style: GoogleFonts.poppins(
                          color: Appcolors.darkGreyColor,
                          fontSize: 14.0,
                          fontWeight: FontWeight.w500),
                    ),
                 
              ],
            ),
          ),
        );
      },
    );
  }

  void toggleIconView() {
    setState(() {
      isIconView = !isIconView;
    });
  }
}

我想当我单击一个特别喜爱的按钮(它变成红色)和其他不会转

pbgvytdp

pbgvytdp1#

您需要使用列表来跟踪N个项目。您可以

class _HomeItemsWidgetState extends State<HomeItemsWidget> {
  List<int> selectedItem = [];

并根据当前状态获取和设置颜色

IconButton(
  onPressed: () {
    toggleIconView(index);
  },
  icon: Icon(selectedItem.contains(index)
      ? Icons.favorite
      : Icons.favorite_border),
  color: selectedItem.contains(index) ? Colors.red : Colors.red,
),

切换选项将为

void toggleIconView(int index) {
  if (selectedItem.contains(index)) {
    selectedItem.remove(index);
  } else {
    selectedItem.add(index);
  }
  setState(() {});
}

相关问题