Flutter 写一个示例Dialog 界面能局部刷新

完整代码 第一部分

---

启动文件main

import 'package:flutter/material.dart';

import 'CounterWidget.dart';

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

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

  @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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @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>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            ElevatedButton(
              onPressed: () {
                _showLoadingDialog(context);
              },
              child: Text('显示加载弹窗'),
            ),
            ElevatedButton(
              onPressed: _showDialog,
              child: Text('Show Dialog'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

封装加载执行动画
  void _showLoadingDialog(BuildContext context) {
    int ixx = 0;

    StateSetter? mSetter;

    Map<int, Widget> stateToWidgetMap = {
      0: const CircularProgressIndicator(),
      1: const Icon(
        Icons.account_circle_rounded,
        color: Colors.blue,
      ),
      2: const Icon(
        Icons.ac_unit,
        color: Colors.blue,
      ),
      3: const Icon(
        Icons.access_alarms_outlined,
        color: Colors.black,
      ),
      // 添加更多状态和对应的Widget
    };

    var strlist = ["执行中..", "执行超时", "指令成功", "串口错误"];
    showDialog(
      context: context,
      builder: (BuildContext context) {
        ///环形加载
        return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
          mSetter = setState;
          return AlertDialog(
            title: Text(strlist[ixx]),
            content: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                stateToWidgetMap[ixx] ?? Text('未知状态'),
                //CircularProgressIndicator(),
                SizedBox(
                  width: 10,
                ), // 添加一些间距
                // Text('请稍候...')
              ],
            ),
          );
        });

        ///钢琴加载
        /* return AlertDialog(
          title: Text('加载中...'),
          content: Container(
            height: 50,
            width: 50,
            child: SpinKitWave(
              color: Colors.blue,
              size: 25.0,
            ), // 使用SpinKitWave作为加载动画
          ),
        );*/
      },
    );

    void _incrementCounter() {
      // setState(() {
      //
      // });
      ixx++;
      if (ixx == strlist.length) {
        ixx = 0;
      }
      mSetter!(() {});
    }

    // 模拟加载过程，这里使用Future.delayed
    Future.delayed(Duration(seconds: 3)).then((_) {
      _incrementCounter();

      ///(context as Element).markNeedsBuild();
      //ixx++;

      //setState(() {});
      // 加载完成后关闭弹窗
      // Navigator.pop(context);
    });

    // 模拟加载过程，这里使用Future.delayed
    Future.delayed(Duration(seconds: 6)).then((_) {
      _incrementCounter();
    });

    // 模拟加载过程，这里使用Future.delayed
    Future.delayed(Duration(seconds: 9)).then((_) {
      _incrementCounter();
    });
    Future.delayed(Duration(seconds: 12)).then((_) {
      _incrementCounter();
    });
    Future.delayed(Duration(seconds: 16)).then((_) {
      _incrementCounter();
      Navigator.pop(context);
    });
  }

  ///局部变量
  void _showDialog() {
    showDialog(
      context: context,
      //点击背景不消失
      barrierDismissible: false,
      builder: (BuildContext context) {
        // 使用StatefulBuilder来局部管理Dialog中的状态
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            return AlertDialog(
              title: Text('Local Refresh Dialog'),
              content: CounterWidget(), // 这里放置我们创建的CounterWidget
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('Close'),
                ),
              ],
            );
          },
        );
      },
    );
  }
}

附带文件 CounterWidget —使用第二个办法实现

import 'package:flutter/material.dart';

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

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _incrementCounter() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

---

其他实现方法 上面的代码使用控制对象

StatefulBuilder
1、声明控制对象

final StateSetter mSetter;

2、包裹更新组件

StatefulBuilder(
  builder: (BuildContext context, StateSetter setState) {
    mSetter = setState;
    return Text("刷新组件");
  },
),

3、刷新

this.mSetter(() {});

—注册法-----比较麻烦
StreamBuilder
1、注册监听控制器

int value = 0;
final StreamController<int>  _streamController = StreamController();

2、更新组件

StreamBuilder(
        stream: _streamController.stream,
       initialData: value,
       builder: (BuildContext context, AsyncSnapshot snapshot) {
        return Text('更新的组件--只更新这里');
      },

3、刷新

_streamController.add(a);

4、回收

  _streamController.close();