Flutter中的各种刷新小部件

朽木成才2023-11-02 16:03

1.FutureBuilder

用于处理异步操作和构建界面的非常有用的小部件。它通常与 Future 对象一起使用，用于在异步操作完成后构建界面。

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Future<String> fetchData() async {
    // 模拟异步操作，例如从网络请求数据
    await Future.delayed(Duration(seconds: 2));
    return "Hello, World!";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FutureBuilder Example"),
      ),
      body: FutureBuilder<String>(
        future: fetchData(),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text("Error: ${snapshot.error}"));
          } else {
            return Center(child: Text("Data: ${snapshot.data}"));
          }
        },
      ),
    );
  }
}

如果 FutureBuilder 在构建时频繁重建，可能会导致性能问题。确保不要将 FutureBuilder 嵌套在频繁重建的小部件内部，以避免不必要的性能开销。

2.StreamController

要实现流式刷新，通常需要使用 Stream 和 StreamBuilder 来监听和更新数据。

dart 复制代码 
import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  StreamController<int> _dataStreamController = StreamController<int>();
  int _data = 0;

  @override
  void initState() {
    super.initState();
    // 模拟一个数据源，每秒生成一个新数据
    Timer.periodic(Duration(seconds: 1), (timer) {
      _dataStreamController.sink.add(_data++);
    });
  }

  @override
  void dispose() {
    _dataStreamController.close(); // 关闭流
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("StreamBuilder Example"),
      ),
      body: StreamBuilder<int>(
        stream: _dataStreamController.stream,
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text("Error: ${snapshot.error}"));
          } else {
            return Center(child: Text("Data: ${snapshot.data}"));
          }
        },
      ),
    );
  }
}

3.ValueListenableBuilder

用于监听 ValueListenable 对象的值变化并构建界面。它允许你在值发生变化时更新界面，而无需重建整个小部件树。

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class CounterModel extends ValueNotifier<int> {
  CounterModel(int value) : super(value);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterModel = CounterModel(0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ValueListenableBuilder Example'),
        ),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: counterModel,
            builder: (BuildContext context, int value, Widget child) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Counter Value: $value'),
                  ElevatedButton(
                    onPressed: () {
                      counterModel.value++;
                    },
                    child: Text('Increment'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

4.LayoutBuilder

用于获取父级小部件的约束信息并根据约束信息自定义构建界面。它通常用于创建根据父级尺寸动态调整的小部件，如自适应布局。

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('LayoutBuilder Example'),
        ),
        body: Center(
          child: Container(
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                return Center(
                  child: Text(
                    'Width: ${constraints.maxWidth.toStringAsFixed(2)}\nHeight: ${constraints.maxHeight.toStringAsFixed(2)}',
                    style: TextStyle(color: Colors.white),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

5.AnimatedBuilder

用于在动画执行过程中监听值的变化并构建界面的小部件。通常，它与 AnimationController 或其他动画对象一起使用，以便在动画执行期间更新界面。

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedBuilder Example'),
        ),
        body: Center(
          child: MyAnimationWidget(),
        ),
      ),
    );
  }
}

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
      ..addListener(() {
        // 当动画值发生变化时重建界面
        setState(() {});
      });

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: Center(
              child: Text(
                'Opacity: ${_animation.value.toStringAsFixed(2)}',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        );
      },
    );
  }
}

6.PageRouteBuilder

用于自定义页面过渡动画的小部件，通常与 Navigator 一起使用。它允许你创建自定义的页面切换效果，包括滑动、渐变、缩放等动画效果。

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageRouteBuilder Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) {
                  return SecondPage();
                },
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  const begin = Offset(1.0, 0.0);
                  const end = Offset.zero;
                  const curve = Curves.easeInOut;
                  var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
                  var offsetAnimation = animation.drive(tween);
                  return SlideTransition(
                    position: offsetAnimation,
                    child: child,
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}

7.AnimatedSwitcher

用于在切换不同小部件时执行动画的小部件。它允许你在切换小部件时应用自定义的入场和出场动画效果。

dart 复制代码 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _showFirstWidget = true;

  void _toggleWidget() {
    setState(() {
      _showFirstWidget = !_showFirstWidget;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedSwitcher Example'),
      ),
      body: Center(
        child: AnimatedSwitcher(
          duration: Duration(milliseconds: 500), // 切换动画的持续时间
          child: _showFirstWidget
              ? FirstWidget(
                  key: ValueKey<int>(1), // 指定不同的 key 以区分不同的小部件
                )
              : SecondWidget(
                  key: ValueKey<int>(2), // 指定不同的 key 以区分不同的小部件
                ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleWidget,
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}

class FirstWidget extends StatelessWidget {
  FirstWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      key: key,
      width: 200,
      height: 200,
      color: Colors.blue,
      child: Center(
        child: Text(
          'First Widget',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

class SecondWidget extends StatelessWidget {
  SecondWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      key: key,
      width: 200,
      height: 200,
      color: Colors.green,
      child: Center(
        child: Text(
          'Second Widget',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

8.FormBuilder

FormBuilder 是一个 Flutter 插件，用于简化表单的创建和处理。它通过创建表单字段和验证逻辑，让表单管理更容易。

dart 复制代码 
dependencies:
  flutter_form_builder: ^9.1.1
dart 复制代码 
final GlobalKey<FormBuilderState> _formKey = GlobalKey<FormBuilderState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Login Form'),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: FormBuilder(
        key: _formKey,
        autovalidateMode: AutovalidateMode.always, // 自动验证模式
        child: Column(
          children: <Widget>[
            FormBuilderTextField(
              name: 'username',
              decoration: InputDecoration(labelText: 'Username'),
              validator: FormBuilderValidators.required(context),
            ),
            FormBuilderTextField(
              name: 'password',
              decoration: InputDecoration(labelText: 'Password'),
              validator: FormBuilderValidators.required(context),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState.saveAndValidate()) {
                  // 表单验证通过，执行提交操作
                  print(_formKey.currentState.value);
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    ),
  );
}
相关推荐
萧鼎22 分钟前
Python并发编程库：Asyncio的异步编程实战
开发语言·数据库·python·异步
学地理的小胖砸23 分钟前
【一些关于Python的信息和帮助】
开发语言·python
疯一样的码农23 分钟前
Python 继承、多态、封装、抽象
开发语言·python
^velpro^24 分钟前
数据库连接池的创建
java·开发语言·数据库
秋の花32 分钟前
【JAVA基础】Java集合基础
java·开发语言·windows
小松学前端35 分钟前
第六章 7.0 LinkList
java·开发语言·网络
可峰科技44 分钟前
斗破QT编程入门系列之二：认识Qt：编写一个HelloWorld程序（四星斗师）
开发语言·qt
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
全栈开发圈1 小时前
新书速览|Java网络爬虫精解与实践
java·开发语言·爬虫
面试鸭1 小时前
离谱！买个人信息买到网安公司头上？？？
java·开发语言·职场和发展
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解