Flutter基础学习 1-19 第一个Hello World程序

Flutter框架介绍：

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。

Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述，以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

-------百度百科

最近看到Flutter貌似很火的样子，于是决定学一学，作为新兴事物，网上的教程不多，不过好在有，技术胖制作的教程还是值得学一学的........

编程工具使用VSCode，Flutter环境配置根据教程一步一步设置就好了，这里跳过.........

第一个程序 Hello World

先快速写一个最简单的结构体，这个界面只包含两部分，头部订单的蓝色bar条和屏幕中间区域的内容。（请看下面代码）

这段代码写在根目录\lib\main.dart文件中，这就是Flutter主文件。

import 'package:flutter/material.dart';//导入material风格的包
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    //MaterialApp:代表使用纸墨设计（Material Design）风格的应用
    return MaterialApp(
       title: 'Welcome to Flutter',   //title ： 在任务管理窗口中所显示的应用名字
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          //创建一个显示在界面顶部的一个AppBar，并添加文本
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          //body:当前界面所显示的主要内容
          //在主体的中间区域，添加一个Hello World
          body: Center(
            child: Text('Hello World'),
          ),
       ),
    );
  }
}

写完后打开终端，输入：flutter run 运行

代码中需要注意的知识点：

1、Dart语法Function函数

Dart是面向对象的语言，即使是函数也是对象，并且属于Function类型的对象。这意味着函数可以分配给变量或作为参数传递给其他函数。当然你也可以像JavaScript一样，调用一个函数。

比如我们写Hello World中的第3行，就是一个函数。

void main() =>runApp(MyApp());

因为这个函数体里只有一行代码，所以可以直接使用=>来省略{}，只有函数体里只有一行时，才可以使用，否则请使用大括号。

（ps:学习Dart语法时你要记住一条，Dart里一切皆对象，包括数字和函数.......）

2、StatefulWidget和StatelessWidget

StatefulWidget ：具有可变状态( state)的Widget(窗口小部件)，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。状态( state) 是可以在构建Widget时同步读取时和在Widget的生命周期期间可能改变的信息。Widget实现者的责任就是在状态改变时通过 State.setState. 立即通知状态，当您描述的用户界面部分不依赖于对象本身中的配置信息和其中构件被夸大的BuildContext时，无状态小部件很有用。对于可以动态改变的组合，例如由于具有内部时钟驱动状态，或取决于某些系统状态，请考虑使用StatefulWidget。StatefulWidget实例本身是不可变的，并将其可变状态存储在由createState方法创建的独立状态对象中，或者存储在该状态订阅的对象中，例如Stream或ChangeNotifier对象，其引用存储在StatefulWidget的最终字段中本身。该框架只要调用一个StatefulWidget就调用createState，这意味着如果该小部件已经插入到多个位置的树中，那么多个State对象可能与同一个StatefulWidget关联。同样，如果StatefulWidget从树中移除，后来在树再次插入时，框架将调用createState再创建一个新的国家目标，简化的生命周期状态的对象。
StatelessWidget：不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字（写上后就在那里了，死也不会变了）。无状态小部件是一个小部件，它通过构建一系列其他小部件来更加具体地描述用户界面，从而描述用户界面的一部分。构建过程以递归方式继续进行，直到用户界面的描述完全具体（例如，完全由RenderObjectWidget组成，它描述具体的RenderObject）。当您描述的用户界面部分不依赖于对象本身中的配置信息和其中构件被夸大的BuildContext时，无状态小部件很有用。对于可以动态改变的组合，例如由于具有内部时钟驱动状态，或取决于某些系统状态，请考虑使用StatefulWidget。无状态小部件的构建方法通常只在以下三种情况下调用：第一次将小部件插入树中，第一次在小部件的父级更改其配置时以及第二次使用InheritedWidget时，它依赖于更改。如果一个小部件的父节点会定期更改小部件的配置，或者如果它依赖于频繁更改的继承小部件，那么优化构建方法的性能以保持流畅的渲染性能非常重要。

这个HelloWorld代码就继承了不可变窗口部件StatelessWidget。

3、VSCode中如何热加载

用VSCode编写Flutter不好的一点就是要手动加载更新应用，个人感觉这至少会降低10%的工作效率。

当我们运行flutter run以后，会有一段红色文字的提示，说明了我们可以作的事情。

To hot reload changes while running, press "r". To hot restart (a
nd rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is
available at: http://127.0.0.1:64590/
You can dump the widget hierarchy of the app (debugDumpApp) by pressing "w".
To dump the rendering tree of the app (debugDumpRenderTree), press "t".
For layers (debugDumpLayerTree), use "L"; for accessibility (debugDumpSemantics), use "S" (for traversal order) or "U" (for inverse hit test order).
To toggle the widget inspector (WidgetsApp.showWidgetInspectorOverride), press "i".
To toggle the display of construction lines (debugPaintSizeEnabled),
press "p".
To simulate different operating systems, (defaultTargetPlatform), press "o".
To display the performance overlay (WidgetsApp.showPerformanceOverlay), press "P".
To save a screenshot to flutter.png, press "s".
To repeat this help message, press "h". To detach, press "d"; to quit, press "q".

我们来看几个重点的：

r 键：点击后热加载，也就算是重新加载吧。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换android和ios的预览模式。
q 键：退出调试预览模式。

4、Scaffold布局控件介绍

Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。并且提供展示抽屉（drawers，比如：左边栏）、通知（snack bars）以及底部按钮（bottom sheets）。我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面。
Scaffold 主要的属性说明：
appBar：显示在界面顶部的一个 AppBar。

body：当前界面所显示的主要内容。

floatingActionButton：在 Material 中定义的一个功能按钮。

persistentFooterButtons：固定在下方显示的按钮。

drawer：侧边栏控件。

bottomNavigationBar：显示在底部的导航栏按钮栏。可以查看文档：Flutter学习之制作底部菜单导航。

backgroundColor：背景颜色。

resizeToAvoidBottomPadding：控制界面内容 body是否重新布局来避免底部被覆盖了。
5、Flutter控件MaterialApp

MaterialApp代表使用纸墨设计（Material Design）风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。

MaterialApp主要属性如下：

title：在任务管理窗口中所显示的应用名字
主题：应用各种UI所使用的主题颜色
color：应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
home：应用默认所显示的界面Widget
routes：应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址
initialRoute：第一个显示的路由名字，默认值为Window.defaultRouteName
onGenerateRoute：生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
onLocaleChanged：当系统修改语言的时候，会触发å这个回调
navigatorObservers：应用Navigator的监听器
debugShowMaterialGrid：是否显示纸墨设计基础布局网格，用来调试UI的工具
showPerformanceOverlay：显示性能标签，https：//flutter.io/debugging/#performanceoverlay
checkerboardRasterCacheImages，showSemanticsDebugger，debugShowCheckedModeBanner各种调试开关

Flutter基础学习 1-19 第一个Hello World程序

猜你喜欢