Flutter布尔值修改无效求助：点击GestureDetector无法更新UI

问题根源 #

你代码里的openList是showModel函数的局部变量，不属于任何可被Flutter框架管理的组件状态，而且调用的是外部Widget的setState——弹窗UI独立于外部Widget，局部变量的改动无法通知框架重新渲染弹窗内容，所以点击后UI不会切换。

解决方法：用StatefulBuilder管理弹窗内部状态 #

不需要额外新建组件，直接用StatefulBuilder包裹弹窗内的可更新UI部分，就能在弹窗内部维护状态并触发更新。修改后的代码如下：

Future<void> showModel(BuildContext context) {
  return showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (BuildContext context) {
      // 使用StatefulBuilder管理弹窗内部状态
      return StatefulBuilder(
        builder: (context, setState) {
          bool openList = false; // 状态变量放在StatefulBuilder内部
          return Container(
            child: ListView(
              shrinkWrap: true,
              children: [
                GestureDetector(
                  onTap: () {
                    // 这里的setState是StatefulBuilder提供的，负责更新弹窗内部UI
                    setState(() {
                      openList = true;
                    });
                  },
                  child: Image.asset(
                    'assets/icons/diirection.png',
                    height: Get.height * 0.05,
                  ),
                ),
                openList == false
                    ? ExpansionTile(
                        tilePadding: EdgeInsets.all(0),
                        title: itemRow(),
                        children: [itemDetails()],
                      )
                    : Text('data'),
              ],
            ),
          );
        },
      );
    },
  );
}

另一种方案：封装成独立的StatefulWidget #

如果弹窗逻辑复杂，也可以把弹窗内容封装成单独的StatefulWidget，代码结构更清晰：

// 新建弹窗内容组件
class BottomSheetContent extends StatefulWidget {
  const BottomSheetContent({super.key});

  @override
  State<BottomSheetContent> createState() => _BottomSheetContentState();
}

class _BottomSheetContentState extends State<BottomSheetContent> {
  bool openList = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        shrinkWrap: true,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                openList = true;
              });
            },
            child: Image.asset(
              'assets/icons/diirection.png',
              height: Get.height * 0.05,
            ),
          ),
          openList == false
              ? ExpansionTile(
                  tilePadding: EdgeInsets.all(0),
                  title: itemRow(),
                  children: [itemDetails()],
                )
              : Text('data'),
        ],
      ),
    );
  }
}

// 调用弹窗的函数
Future<void> showModel(BuildContext context) {
  return showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (BuildContext context) {
      return const BottomSheetContent();
    },
  );
}

内容的提问来源于stack exchange，提问作者Mahnoor Waheed