第一百期:封装简答的flutter组件

2022-07-15 11:30:45 浏览数 (1)

今天继续学习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 安全之后,将获得稳健性带来的全部好处
代码语言:javascript复制
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等,真正想要能够独立开发,需要不断的去探索,去思考其中的一些问题。

0 人点赞