Flutter中Positioned内IconButton的setState状态更新失效问题（已解决）

核心原因 #

你把likeIt变量声明在了build方法内部，每次调用setState时，build方法会重新执行，likeIt会被重新初始化为false，导致点击后的状态无法保留。即使你尝试在其他位置声明，但最终生效的是build里的局部变量，所以状态永远被重置。

修复步骤 #

1. 将bool likeIt = false;移到_CategoriespecifiqueitemState类的成员变量区域，确保它是State类的实例变量，不会在build重建时被重置。
2. 删除build方法内的bool likeIt = false;声明，避免局部变量覆盖实例变量。

修复后的完整代码 #

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:line_icons/line_icon.dart';

class Categoriespecifiqueitem extends StatefulWidget {
  const Categoriespecifiqueitem({super.key});

  @override
  State<Categoriespecifiqueitem> createState() =>
      _CategoriespecifiqueitemState();
}

bool _isSearchBarTapped = true;

class _CategoriespecifiqueitemState extends State<Categoriespecifiqueitem> {
  final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
  // 正确声明在State类中，作为实例变量
  bool likeIt = false;

  var MylistImage = [
    "images/clothes/chemise.jpg",
    "images/clothes/suit.jpg",
    "images/clothes/hat.jpg",
  ];
  @override
  Widget build(BuildContext context) {
    var values = RangeValues(10, 250);
    // 移除这里的likeIt声明

    return Scaffold(
        key: _key,
        backgroundColor: const Color(0xffF1F1F1),
        body: SafeArea(
          child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(100)),
                    child: TextField(
                      onChanged: (value) {
                        setState(() {
                          _isSearchBarTapped = false;
                        });
                      },
                      decoration: InputDecoration(
                          hintText: "iphone",
                          border: const OutlineInputBorder(
                              borderSide: BorderSide(width: 1),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(100))),
                          prefixIcon: GestureDetector(
                              onTap: () {
                                setState(() {
                                  _isSearchBarTapped = true;
                                });
                              },
                              child: const LineIcon.arrowLeft()),
                          suffixIcon: const LineIcon.search()),
                    ),
                  ),
                  if (_isSearchBarTapped == false) ...[
                    Expanded(
                        child: ListView.builder(
                      itemCount: 5,
                      itemBuilder: (context, index) {
                        return const ListTile(
                            contentPadding: EdgeInsets.only(top: 12, left: 10),
                            title: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("iphone XS"),
                                Divider(
                                  thickness: 2,
                                )
                              ],
                            ));
                      },
                    ))
                  ],
                  if (_isSearchBarTapped == true) ...[
                    Gap(20),
                    Container(
                      height: MediaQuery.of(context).size.height / 2.5,
                      child: Stack(
                        children: [
                          Positioned(
                            child: IconButton(
                                onPressed: () {
                                  setState(() {
                                    likeIt = !likeIt;
                                  });
                                },
                                icon: likeIt == false
                                    ? LineIcon.heart()
                                    : LineIcon.heartAlt(
                                        color: Colors.pink,
                                      )),
                          ),
                          Swiper(
                            itemBuilder: (BuildContext context, int index) {
                              return Image.asset(
                                MylistImage[index],
                              );
                            },
                            itemCount: 3,
                            pagination: SwiperPagination(),
                            control: SwiperControl(color: Colors.cyan),
                          ),
                        ],
                      ),
                      decoration: BoxDecoration(
                        border: Border.all(width: 0.1),
                      ),
                    ),
                    Expanded(
                        child: SingleChildScrollView(
                      child: Row(
                        children: [
                          Expanded(
                            child: Container(
                              color: Color.fromARGB(255, 220, 220, 220),
                              child: Column(
                                children: [
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ))
                  ]
                ],
              )),
        ));
  }
}

额外说明 #

Positioned组件本身不会导致状态失效，问题出在状态变量的生命周期上：只有将状态变量放在State类中，才能在多次build调用之间保留其值。放在build方法内的变量会在每次重建时被重新初始化，自然无法保存状态变化。

内容的提问来源于stack exchange，提问作者Yassine Ben Ayed