今天继续学习flutter相关的一些知识点,主要包括以下几点内容。
- 简单组件封装
- 常见错误处理
- 个人一些粗浅的理解
简单组件封装
flutter和react类似,分为状态组件StatefulWidget
和无状态组件StatelessWidget
。
借助它们,我们可以封装我们自己想要的组件。比如想封装一个类似web端的多选标签:
我们可以用FilterChip组件进行封装:
代码语言:javascript复制
class ChipDemo extends StatefulWidget {
const ChipDemo({Key? key}) : super(key: key);
@override
_ChipDemoState createState() => _ChipDemoState();
}
class _ChipDemoState extends State<ChipDemo> {
List<String> _tags = [
'小猫',
'小狗',
'小鸡',
'小鸭',
];
@override
Widget build(BuildContext context) {
return Container(
child:Wrap(
spacing: 8.0,
children: _tags.map((tag) {
return FilterChip(
label: Text(tag),
selected: _selected.contains(tag),
onSelected: (v) {
setState(() {
if (_selected.contains(tag)) {
_selected.remove(tag);
} else {
_selected.add(tag);
}
});
},
);
}).toList(),
),
);
}
}
我们先声明一个类继承StatefulWidget,然后重写createState方法,_ChipDemoState又继承了State类,他的返回值是一个ChipDemo类,最终返回一个Widget类。
错误信息
在开发阶段以及发布阶段,我们通常会遇到各种各样的报错。这里列举几个我遇到的报错。
代码语言:javascript复制Error: Cannot run with sound null
safety, because the following
dependencies
don't support null safety:
在开始针对 null safety 的详细设计之前,Dart 团队定义了以下三个核心原则:
- 默认情况下不可为空,除非开发者明确告知 Dart 变量可以为 null,否则它将认为该变量不可为空。选择这个作为默认选项,因为我们发现 non-nullable 是迄今为止 API 中最常见的选择。
- 逐步采用,因为还有有很多 Dart 代码需要修改,必须把它们逐步迁移到 null safety。在同一项目中应该可以包含 null safety 代码和 non-null-safe 代码,另外我们还将提供工具来帮助开发者进行迁移。
- 完全可靠,如上所述 Dart 的 null safety是可靠的,将整个项目和依赖项迁移到null 安全之后,将获得稳健性带来的全部好处
flutter run --no-sound-null-safety
直接执行上面的命令即可。
代码语言:javascript复制The argument type 'Iterable<Widget>' can't be assigned to the parameter type
这个问题和数据类型相关,需要我们对数据类型做一些简单的转换。
代码语言:javascript复制Scheme not starting
with alphabetic character
没有以字母字符开头。这里是因为我在定义字符串变量的时候多了一个引号。
代码语言:javascript复制Exception in thread "main" java.util.zip.ZipException: zip END header not found
这个是执行build命令时出现的错误。出错原因是因为对应的gradle没有找到。需要我们去更新一下gradle。
但是有时候我们手动去修改不一定能起作用。
我处理的方法是直接用android stidio打开flutter项目中的android文件夹,android stidio会提示我们gradle不可用,然后按照提示信息删除原有的,进行更新即可。
打包android之前似乎需要确保电脑上有java sdk的环境。
粗浅的理解
flutter上手的速度相对来说还是比较快的。因为他其实也是个ui框架,只是它可以跨平台。他的ui有两套风格material和cupertino。除了这两套ui之外,还有很多基础的小组件,前端的组件概念在flutter中被称为部件儿,其实是一样的概念。
flutter也有自己的包管理。我们也可以通过pub
来发布自己开发的包。通过https://pub.dev/
来搜索我们需要的包,安装到项目里进行使用。
和package.json
类似,flutter中的包管理通过pubspec.yaml
进行管理。yaml是一种可读性比较高的数据序列化格式。
示例配置:
代码语言:javascript复制name: terrence_flutter
description: A new Flutter project.
version: 1.0.0 1
environment:
sdk: ">=2.17.1 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
# 日期时间选择
intl: ^0.17.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
uses-material-design: true
assets:
- images/a_dot_burr.jpeg
- images/a_dot_ham.jpeg
fonts:
- family: Schyler
fonts:
- asset: fonts/Schyler-Regular.ttf
- asset: fonts/Schyler-Italic.ttf
style: italic
- family: Trajan Pro
fonts:
- asset: fonts/TrajanPro.ttf
- asset: fonts/TrajanPro_Bold.ttf
weight: 700
和web端开发一样,flutter的开发同样需要我们去考虑适配问题。我们可以通过一下现成的包去做适配,比如借助screenutil
。
总之,flutter的上手难度并不难,但是作为新手,需要花一些时间去熟悉各种小部件的常用属性,以及去思考一些常见的布局的实现方式。甚至一些常用的API,系统交互的API等,真正想要能够独立开发,需要不断的去探索,去思考其中的一些问题。