Flutter技术问题：对话框内Checkbox勾选后文本大小无法同步变更

对话框内的StatefulBuilder提供的setState仅负责更新对话框内部的UI状态，不会触发MyHomePage组件的build方法。因此即使修改了_cesbox和textSize变量，外部的文本也不会同步刷新。

在对话框内修改状态后，主动触发MyHomePage组件的状态更新，让外部UI同步变更。同时补充取消勾选时恢复文本大小的逻辑，让功能更完整。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double textSize = 14;
  bool _cesbox = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Flutter\n',
              style: TextStyle(fontSize: textSize),
            ),
            const Text("Click on the box to enlarge the text\n"),
            Checkbox(
              value: _cesbox,
              onChanged: (newbool) {
                setState(() {
                  _cesbox = newbool!;
                  textSize = _cesbox ? 40 : 14;
                });
              },
            ),
            IconButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      content: StatefulBuilder(
                        builder: (BuildContext context, StateSetter dialogSetState) {
                          return Column(
                            mainAxisSize: MainAxisSize.min, // 避免对话框过高
                            children: [
                              const Text("Click on the box to enlarge the text"),
                              Checkbox(
                                value: _cesbox,
                                onChanged: (newbool) {
                                  // 1. 更新全局状态变量
                                  _cesbox = newbool!;
                                  textSize = _cesbox ? 40 : 14;
                                  
                                  // 2. 更新对话框内部UI
                                  dialogSetState(() {});
                                  
                                  // 3. 触发父组件（MyHomePage）的状态更新，同步外部UI
                                  if (mounted) {
                                    setState(() {});
                                  }
                                },
                              ),
                            ],
                          );
                        },
                      ),
                    );
                  },
                );
              },
              icon: const Icon(Icons.menu, size: 25, color: Color.fromARGB(255, 51, 50, 50)),
            ),
          ],
        ),
      ),
    );
  }
}

关键改动说明 #

1. 补充取消勾选逻辑：将文本大小的设置改为textSize = _cesbox ? 40 : 14;，勾选时放大，取消时恢复原大小。
2. 区分两种setState：
   • dialogSetState(() {})：仅更新对话框内部的Checkbox状态，保证对话框内的UI同步。
   • 父组件的setState(() {})：触发MyHomePage的重新build，让外部的文本大小同步更新。
3. 添加mainAxisSize: MainAxisSize.min：避免对话框因为Column默认占满空间而过高，优化UI显示。

内容的提问来源于stack exchange，提问作者مجهول