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
这个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".
我们来看几个重点的:
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主要属性如下: