当前位置: 首页 > news >正文

Flutter 知识点总结

Flutter 知识点总结

一、基础概念

  1. Flutter 是什么

    • Google 开源的跨平台 UI 框架
    • 使用 Dart 语言编写
    • 通过 Skia 图形引擎直接绘制 UI,不依赖原生控件
  2. 核心特点

    • 高性能(60/120fps)
    • 跨平台(iOS/Android/Web/Windows/macOS/Linux)
    • 热重载(Hot Reload)
    • 声明式 UI

二、Dart 语言要点

  1. 基础语法

    • 强类型语言(支持类型推断)
    • 所有对象都是类的实例
    • 支持 async/await
    • 单线程+事件循环
  2. 重要概念

    // 空安全
    String? nullableString = null;// Future 异步处理
    Future<void> fetchData() async {var data = await http.get(url);
    }// Stream 数据流
    Stream<int> countStream() async* {for(int i=0; i<10; i++) {await Future.delayed(Duration(seconds: 1));yield i;}
    }
    

三、Widget 体系

  1. Widget 分类

    • 有状态 Widget:StatefulWidget
    • 无状态 Widget:StatelessWidget
    • 渲染 Widget:RenderObjectWidget
  2. 常用 Widget

    // 基础组件
    Text('Hello'), Icon(Icons.star), Image.network(url)// 布局组件
    Row(), Column(), Stack(), Flex()// 容器组件
    Container(), Padding(), Center(), SizedBox()// 滚动组件
    ListView(), GridView(), SingleChildScrollView()// 功能组件
    GestureDetector(), InkWell(), Navigator()
    
  3. 生命周期

    • StatelessWidget:build()
    • StatefulWidget:
      createState()initState()didChangeDependencies()build()didUpdateWidget()deactivate()dispose()
      

四、布局与样式

  1. 布局模型

    • 约束向下(父→子)
    • 尺寸向上(子→父)
    • 父组件决定位置
  2. 常用布局方式

    // 弹性布局
    Flex(direction: Axis.horizontal,children: [Expanded(flex:2, child:...), Expanded(flex:1, child:...)]
    )// 层叠布局
    Stack(alignment: Alignment.center,children: [Background(), Positioned(top:10, child: FloatingButton())]
    )
    
  3. 样式处理

    // 主题
    Theme(data: ThemeData(primaryColor: Colors.blue),child: Text('Hello', style: Theme.of(context).textTheme.headline6)
    )// 自定义样式
    BoxDecoration(gradient: LinearGradient(colors: [Colors.red, Colors.orange]),borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(blurRadius: 10)]
    )
    

五、状态管理

  1. 基础方式

    • setState:局部状态
    • InheritedWidget:祖先共享数据
  2. 常用方案

    • Provider:最常用的轻量级方案
    • Riverpod:Provider 的改进版
    • Bloc:事件驱动状态管理
    • GetX:简洁的全家桶方案
    • Redux:单向数据流
  3. Provider 示例

    // 定义 Model
    class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}
    }// 提供数据
    ChangeNotifierProvider(create: (_) => Counter(),child: MyApp()
    )// 使用数据
    Consumer<Counter>(builder: (context, counter, _) => Text('${counter.count}')
    )
    

六、路由与导航

  1. 基本导航

    // 跳转
    Navigator.push(context, MaterialPageRoute(builder: (_) => DetailPage()));// 返回
    Navigator.pop(context, '返回数据');
    
  2. 命名路由

    // 注册路由
    MaterialApp(routes: {'/': (context) => HomePage(),'/detail': (context) => DetailPage()}
    )// 使用
    Navigator.pushNamed(context, '/detail', arguments: '数据');
    
  3. 路由守卫

    MaterialApp(onGenerateRoute: (settings) {if(需要登录 && !已登录) {return MaterialPageRoute(builder: (_) => LoginPage());}return MaterialPageRoute(builder: (_) => settings.name == '/detail' ? DetailPage() : HomePage());}
    )
    

七、网络请求

  1. http 包

    import 'package:http/http.dart' as http;Future<void> fetchData() async {final response = await http.get(Uri.parse('https://api.example.com/data'));if(response.statusCode == 200) {print(response.body);}
    }
    
  2. Dio(推荐)

    final dio = Dio();
    final response = await dio.get('/data', queryParameters: {'page':1},options: Options(headers: {'token':'xxx'})
    );
    
  3. JSON 解析

    // 手动解析
    Map<String, dynamic> data = jsonDecode(response.body);// 自动生成(json_serializable)
    ()
    class User {final String name;final int age;factory User.fromJson(Map<String,dynamic> json) => _$UserFromJson(json);Map<String,dynamic> toJson() => _$UserToJson(this);
    }
    

八、数据持久化

  1. shared_preferences

    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('token', 'abc123');
    String token = prefs.getString('token');
    
  2. SQLite(sqflite)

    final db = await openDatabase('my_db.db');
    await db.execute('CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, name TEXT)');
    await db.insert('users', {'name': 'Jack'});
    List<Map> users = await db.query('users');
    
  3. Hive(高性能 NoSQL)

    var box = await Hive.openBox('myBox');
    box.put('name', 'Lisa');
    print(box.get('name'));
    

九、动画系统

  1. 基础动画

    AnimationController(duration: Duration(seconds:1),vsync: this
    )..forward();FadeTransition(opacity: CurvedAnimation(parent: controller,curve: Curves.easeIn),child: Text('淡入淡出')
    )
    
  2. Hero 动画

    // 页面1
    Hero(tag: 'avatar', child: Image.asset('avatar.png'))// 页面2
    Hero(tag: 'avatar', child: Image.asset('avatar.png'))
    
  3. 物理动画

    SpringSimulation(SpringDescription(mass:1, stiffness:100, damping:10),0.0,  // 起始位置300.0,// 结束位置10.0  // 初始速度
    )
    

十、测试与调试

  1. 单元测试

    test('Counter increments', () {final counter = Counter();counter.increment();expect(counter.value, 1);
    });
    
  2. Widget 测试

    testWidgets('MyWidget has a title', (tester) async {await tester.pumpWidget(MyWidget(title: 'T'));expect(find.text('T'), findsOneWidget);
    });
    
  3. 调试工具

    • Flutter Inspector:检查 Widget 树
    • Performance Overlay:性能分析
    • Dart DevTools:全面的调试工具集

十一、进阶主题

  1. Platform Channels

    • 与原生平台通信
    • 支持 MethodChannel/EventChannel/BasicMessageChannel
  2. Isolate

    void heavyTask(SendPort port) {// 计算密集型任务port.send(result);
    }final receivePort = ReceivePort();
    await Isolate.spawn(heavyTask, receivePort.sendPort);
    receivePort.listen((data) => print(data));
    
  3. Flutter Web

    • 同一套代码编译为 Web 应用
    • 注意区分平台特定代码
  4. Flutter 桌面端

    • Windows/macOS/Linux 支持
    • 系统菜单、原生窗口管理等特性

十二、最佳实践

  1. 代码组织

    lib/
    ├── models/        # 数据模型
    ├── services/      # 业务逻辑
    ├── repositories/  # 数据仓库
    ├── pages/         # 页面
    ├── widgets/       # 公用组件
    └── main.dart      # 入口文件
    
  2. 性能优化

    • 避免 build() 方法中执行耗时操作
    • 使用 const 构造函数
    • 合理使用 ListView.builder
    • 减少不必要的重绘
  3. 国际化

    MaterialApp(localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: [const Locale('en', 'US'),const Locale('zh', 'CN'),],
    )
    
  4. 打包发布

    # Android
    flutter build appbundle
    # iOS
    flutter build ipa
    # Web
    flutter build web
    

十三、生态资源

  1. 官方资源

    • flutter.dev
    • Flutter GitHub
    • Pub.dev 包仓库
  2. 学习资源

    • Flutter 官方文档
    • 《Flutter 实战》开源电子书
    • Flutter 社区(掘金、CSDN、StackOverflow)
  3. 常用插件

    • http/dio:网络请求
    • provider/riverpod:状态管理
    • shared_preferences/hive:本地存储
    • get_it:依赖注入
    • cached_network_image:图片缓存
    • flutter_bloc:BLoC 模式

这个总结涵盖了 Flutter 开发的主要知识点,可以作为学习路线图或速查参考。实际开发中应根据项目需求选择合适的技术方案。

http://www.dtcms.com/a/271889.html

相关文章:

  • React虚拟DOM的进化之路
  • Vue.js 过渡 动画
  • 如何在Flutter开发中系统性减少知识盲区
  • 使用 FreeRTOS 实现简单多任务调度(初识 RTOS)
  • Excalidraw:一款轻量、高效、极具手感的在线白板工具
  • 【免费数据】2020年中国高精度耕地范围矢量数据
  • 解析几何几百年重大错误:将无穷多各异圆盘(球)误为同一点集
  • 语音转文字「本地化」新解!Whisper Web+cpolar实现零服务器部署与远程操作
  • 大数据在UI前端的应用创新:基于用户画像的精准广告投放系统
  • imx6ull-裸机学习实验17——SPI 实验
  • 《数据库》第一次作业:MySQL数据库账户及授权
  • FeatherScan v4.0 – 适用于Linux的全自动内网信息收集工具
  • 2025.07.09华为机考真题解析-第二题200分
  • 华为L1-L6流程体系核心框架
  • 2025.07.09华为机考真题解析-第三题300分
  • java与sql的日期类型常用教程讲解
  • 常见射频电路板工艺流程
  • 《信号与系统》学习笔记——第八章
  • 大小端模式如何影响位域中各成员的位序;位域的其他细节问题
  • k8s:安装 Helm 私有仓库ChartMuseum、helm-push插件并上传、安装Zookeeper
  • 正点原子 文件权限
  • Spring核心原理的快速入门:快速了解IoC与DI
  • RHCE考试 ——笔记
  • 【Linux手册】从接口到管理:Linux文件系统的核心操作指南
  • Redis数据安全性分析
  • PyTorch Tensor 操作入门:转换、运算、维度变换
  • 【NLP入门系列六】Word2Vec模型简介,与以《人民的名义》小说原文实践
  • IPv4和IPv6双栈配置
  • 【K8S】Kubernetes 使用 Ingress-Nginx 基于 Cookie 实现会话保持的负载均衡
  • HCIA第一次实验报告:静态路由综合实验