单击列表中相应卡片时更改图标 Flutter

Question

我想做的是，当您单击图标（在卡片上）时，另一个图标会发生变化。但是整个列表中的所有图标都不会改变（就像我所做的那样），而只会改变相应卡片中的图标。以后请求会从API中获取，但是现在为了测试我创建了一个数据sheet。告诉我如何正确实施？

final List<String> list = [
    "Eli's Poynt AC",
    "Eli's Poynt Home DC",
  ];

  bool isSettings = false;
    
ListView.builder(
              shrinkWrap: true,
              itemCount: list.length + 1,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Container(
                    height: 112,
                    padding:
                        const EdgeInsets.symmetric(horizontal: 21, vertical: 16),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: constants.Colors.greyDark,
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 80,
                          width: 80,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.asset('assets/images/poynt.jpg'),
                          ),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                list[index],
                                style: constants.Styles.normalHeavyTextStyleWhite,
                              ),
                              const SizedBox(height: 6),
                              const Text(
                                'Evan Gbirol St, 18',
                                style: constants.Styles.smallBookTextStyleWhite,
                              ),
                            ],
                          ),
                        ),
                        SvgPicture.asset(constants.Assets.poynt1),
                        const SizedBox(width: 20),
                        IconButton(
                          onPressed: () {
                            
                            setState(() {
                              isSettings = !isSettings;
                            });
                          },
                          icon: isSettings
                              ? SvgPicture.asset(constants.Assets.remove2)
                              : SvgPicture.asset(constants.Assets.threeDot),
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(),
                        ),

Answer 1

将 ListView 中的容器作为新小部件提取到新的有状态 class 中，并在 ListView 中调用它 class。

Answer 2

您需要为每个项目创建一个包含 isSetting 变量的 bool 列表；

final List<String> list = [
    "Eli's Poynt AC",
    "Eli's Poynt Home DC",
  ];

List<bool> isSettings = [];
    
ListView.builder(
              shrinkWrap: true,
              itemCount: list.length + 1,
              itemBuilder: (context, index) {
                isSettings.add(false);
                return Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Container(
                    height: 112,
                    padding:
                        const EdgeInsets.symmetric(horizontal: 21, vertical: 16),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: constants.Colors.greyDark,
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 80,
                          width: 80,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.asset('assets/images/poynt.jpg'),
                          ),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                list[index],
                                style: constants.Styles.normalHeavyTextStyleWhite,
                              ),
                              const SizedBox(height: 6),
                              const Text(
                                'Evan Gbirol St, 18',
                                style: constants.Styles.smallBookTextStyleWhite,
                              ),
                            ],
                          ),
                        ),
                        SvgPicture.asset(constants.Assets.poynt1),
                        const SizedBox(width: 20),
                        IconButton(
                          onPressed: () {
                            setState(() {
                              isSettings[index] = !isSettings[index];
                            });
                          },
                          icon: isSettings[index]
                              ? SvgPicture.asset(constants.Assets.remove2)
                              : SvgPicture.asset(constants.Assets.threeDot),
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(),
                        ),

单击列表中相应卡片时更改图标 Flutter

Change icon when clicking on the corresponding card in the list Flutter

flutter

dart

flutter-layout