当前位置：网站首页>第一百期：封装简答的flutter组件

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

2022-07-15 11:46:00 【terrence386】

今天继续学习flutter相关的一些知识点，主要包括以下几点内容。

简单组件封装
常见错误处理
个人一些粗浅的理解

简单组件封装

flutter和react类似，分为状态组件StatefulWidget和无状态组件StatelessWidget。

借助它们，我们可以封装我们自己想要的组件。比如想封装一个类似web端的多选标签：

我们可以用FilterChip组件进行封装：


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类。

错误信息

在开发阶段以及发布阶段，我们通常会遇到各种各样的报错。这里列举几个我遇到的报错。

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

直接执行上面的命令即可。

The argument type 'Iterable<Widget>' can't be assigned to the parameter type

这个问题和数据类型相关，需要我们对数据类型做一些简单的转换。

Scheme not starting
with alphabetic character

没有以字母字符开头。这里是因为我在定义字符串变量的时候多了一个引号。

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是一种可读性比较高的数据序列化格式。

示例配置：

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等，真正想要能够独立开发，需要不断的去探索，去思考其中的一些问题。

原网站

版权声明
本文为[terrence386]所创，转载请带上原文链接，感谢
https://cloud.tencent.com/developer/article/2049214