在AndroidStudio中对Flutter的认识

---

前言

​在Android Studio的学习中，我认识到不同ios、android和PC端之间存在不同。苹果在2008年发布iOS，Google 在2009年发布Android，它们的SDK使用的是不同的编程语言，Objective-C,Swift和Java,Kotlin。开发人员在直接调用平台SDK进行UI开发时，由于语言以及SDK的不同，所以开发人员必须为两个平台分别开发App。那么开发人员的工作量将会大大提升，所以由逐渐推出了很多跨平台的开发。Flutter就是其中的一种。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Flutter是什么？

Flutter is Google’s UI toolkit for building beautiful,natively compiled applicatioins for mobile,web,and desktop from a single condebase.（引用自官网）
由上面的介绍可以知道Flutter是Google一个新的用于构建跨平台的手机App的SDK。即写一份代码，在Android 和iOS平台上都可以运行。

二、为什么选择Flutter

越来越多的App包含Flutter，如QQ，QQ邮箱，Soul等的制作中都含有Flutter。这也可以体现出Flutter的实用性。但为什么会选择Flutter呢？

1.使用Dart语言

根据大神介绍，Dart语言是构建客户端应用程序的绝佳工具，而且针对UI开发工作做了调整和优化。它与其他语言（C#,Java）相似，所以大部分开发人员可以快速上手并使用它。
代码如下（部分）：

class MyApp extends StatelessWidget {
   
  const MyApp({
   Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

2.快速开发

使用过Android Studio的朋友都应该被它的速度折服过，而且，虽然Android Studio的xml文件具有布局预览功能，但在自定义View的时候不是每次都像所预期的运行。
但Flutter有“热重载”功能，可以实时看到应用的变化，且不会丢失当前应用程序的状态。“热重载”的实现与Dart语言有关。Dart语言支持JIT(Just In Time)。即能够即时编译或运行时编译。这样就可以实时看到应用的变化了。

---

## 3.良好的交互体验 用户体验的关键时App的性能，而Flutter不依赖任何中间代码做映射，直接调用底层代码，极大的提高了性能。 而对于开发人员，Flutter可以随时修改屏幕上的任何空间，可以直接使用原生控件来做UI动画，在使用Flutter生成动画的时候，不仅更加灵活和通用，而且不会额外增加工作量。

---

三、Key的介绍

Flutter积攒了纪念的Widget,像是专门为我们准备的礼物
在介绍Key之前，我们要理解它是谁的参数。
–>Widget
我们要理解Widget到底是什么。
Widget是Flutter应用程序用户界面的基本构建块。
每个Widget都是用户界面一部分的不可变声明。 与其他将视图、控制器、布局和其他属性分离的框架不同，Flutter具有一致的统一对象模型：widget。可以理解为Widget是描述UI元素Element的配置数据。一个Widget可以对应多个Element，即：同一份配置，可生成多个Element；每个Element都会对应一个Widget。

abstract class Widget extends DiagnosticableTree {
   

  const Widget({
    this.key });

  final Key key;

  @protected
  Element createElement();

  ...
  

  static bool canUpdate(Widget oldWidget, Widget newWidget) {
   
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}

而如何灵活的运用Widget,Key很重要。

---

Key

此处将Key设置为一级标题，只是为了强调Key,并非格式错误
Widget的构造方法中有一个可选参数Key

abstract class Widget extends DiagnosticableTree {
   
  const Widget({
    this.key });

首先我们可以想想：
如果没有Key会发生什么
如果StatelessWidget没有Key不会出现问题，
但StatefulWidget如果没有Key就会导致无法进行添加删除等操作。因为代码无法判断相同的三个代码，就像你无法判断三个长相一直的三胞胎。

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Box(Colors.blue),
            Box(Colors.blue),
            Bo