• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

【Flutter从0到1开发APP】番茄计时APP:Flutter 速览基础篇

武飞扬头像
正经程序员
帮助46

前言

刚开始写小程序的时候,翻了翻文档,就开搞了。本来以为Flutter上手很快,大意了,要了解的东西还不少。

Flutter为拥有其他平台开发经验的开发者提供了对比文章,我看了写给Android和web开发者的指南,总算心里有底了。

又用了几个小时时间,看了一遍文档,和Dart一样,我将我认为的重点知识整理成两篇文章,分为基础篇和进阶篇,本篇为基础篇。

Flutter是一个UI框架,和上手其他UI框架一样,重点关注以下几点:

布局、组件、路由、数据交互、数据存储/缓存、测试、打包、持续部署。

Widgets

基础内容

widget中文翻译是小部件,在Flutter中,任何东西都是widget,一个按钮一张图一段文字, widget类似Android中的View,具体也是有差异的。

组件分为有状态组件和无状态组件:

  1. 无状态组件(StatelessWidget)  无状态组件,可以理解为将外部传入的数据转化为界面展示的内容,只会渲染一次。 StatelessWidget继承自Widget类,重写了createElement()方法。
class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFF2DBD3A));
  }
}
  1. 有状态组件(StatefulWidget)  有状态组件,是定义交互逻辑和业务数据,可以理解为具有动态可交互的内容界面,会根据数据的变化进行多次渲染。 和StatelessWidget一样,StatefulWidget也是继承自Widget类,并重写了createElement()方法,不同的是返回的Element 对象并不相同;另外StatefulWidget类中添加了一个新的接口createState()。
class YellowBird extends StatefulWidget {
  const YellowBird({ Key? key }) : super(key: key);

  @override
  State<YellowBird> createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFFFFE306));
  }
}

下面是基础的widget:

  1. Text:Text widget 可以用来在应用内创建带样式的文本。
  2. Row, Column:类似于Android中的LinearLayout,这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。
  3. Stack:Stack widget 不是线性(水平或垂直)定位的,而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget,以相对于 Stack 的上,右,下,左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。
  4. Container:就像web中万能的div一样,Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰,如背景,边框,或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外,Container可以使用矩阵在三维空间进行转换。

生命周期

Flutter中的生命周期是指有状态组件的生命周期。

  • createState: 当创建一个有状态的widget时,框架会调用一个createState()方法,而且必须重载该方法。
  • initState: 当这个对象被插入到树中时调用这个方法。每个 State 对象将只调用一次。在这里,我们可以初始化小部件所需的变量,例如AnimationController。
  • didChangeDependencies: 在initState之后以及 State 对象的依赖关系通过InheritedWidget发生变化时立即调用此方法。
  • build: 每次重新构建小部件时都会调用此方法。这可以在调用initStatedidChangeDependencies、didUpdateWidget或通过调用setState 更改状态时发生。
  • didUpdateWidget: 每当小部件配置更改时调用此方法。一个典型的情况是父级通过构造函数将一些变量传递给子级小部件。
  • deactivate: 从树中删除对象时调用此方法。
  • dispose: 当该对象从树中永久删除时调用此方法。在这里,我们应该释放该对象保留的所有资源,例如停止动画。调用此方法的一个示例是使用 Navigator 的pushReplacement() 将当前小部件替换为新小部件。

326A4DC6-AFD6-4914-ADB5-D61A37D1F06A.webp

关于布局的详细内容,建议通读官方文档:flutter.cn/docs/develo…

路由

Flutter有命令式路由机制(Navigator组件)和声明式路由机制(Router组件)。对于小型应用程序来说,通常只需通过 MaterialApp 构造函数中的 MaterialApp.routes 属性,加以使用 Navigator API,就可以很好地提供服务。

Navigator案例:flutter.cn/docs/cookbo…

关于flutter router详细解析,建议看这篇文章:medium.com/flutter/lea…

数据交互

状态管理

Flutter应用是声明式的,也就是说当应用状态发生改变时,会触发用户界面的重绘,无需像原生Android中去主动改变用户界面本身。类似于Vue中的双向数据绑定。

网络请求

http软件包提供了网络请求的功能,基础功能都已封装完成。支持Android,iOS,Web,桌面端等。

使用示例:

import 'package:http/http.dart' as http;

var url = Uri.parse('https://example.com/whatsit/create');
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

print(await http.read(Uri.parse('https://example.com/foobar.txt')));

JSON

相关文档地址:flutter.cn/docs/develo…

数据存储/缓存

对于简单的数据存储,比如存储一些键值对,推荐使用shared_preferences包。

如果需要存储或查询大量数据,可以使用sqflite包。

  1. shared_preferences:为简单数据包装特定于平台的持久存储(iOS 和 macOS 上的 NSUserDefaults,Android 上的 SharedPreferences 等)。数据可能会异步持久化到磁盘,并且不能保证写入返回后会持久化到磁盘,所以这个插件一定不能用于存储关键数据。
  2. sqflite:Flutter 的 SQLite 插件。支持 iOS、Android 和 MacOS。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfbeej
系列文章
更多 icon
同类精品
更多 icon
继续加载