用后感:Dart很强大!支持编写Server端、移动app端、web端的编程语言,语法简单,只要你掌握了任何一门面向对象的高级编程语言,再来学习Dart,绝对在1小时内全部学会!
目录
- 1.下载Flutter
- 2.检测Flutter
- 3.一个简单的Flutter程序示例
- 4.最基本最基础的Flutter代码编写
- 5.Flutter原理
- 6.Flutter部署打包
1.下载flutter
直接下载,需要解压缩
https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.2.1-stable.zip
通过git
git clone https://github.com/flutter/flutter.git -b stable
配置环境变量,设置一次,关闭Terminal(终端)后,下次还需要设置,所以这是一次性设置。
中间的路径修改成你的flutter解压后/克隆后的目录地址
export PATH="$PATH:/Users/admin/Documents/flutter/bin"
2.整体检测flutter安装及配置是否正确
flutter doctor
macOS上需要安装Xcode、Android Studio两个集成开发工具,如果使用flutter开发web应用,还需要安装Chrome浏览器,如果你没有安装这些,请根据自己需要来。
3.一个简单的Flutter程序示例
flutter create testapp1
testapp1就是我们的测试项目名称,一定要小写,否则会报错。
当项目创建完毕后,你会看到testapp1目录下的文件结构如下所示:
- iOS表示iOS端的项目
- android表示安卓端的项目
- web表示web端pc和H5的项目
- pubspec.yaml 表示flutter的资源和依赖库的管理
所以一个flutter项目是一次开发,三端运行!
然后,cd testapp1
目录下,运行此项目
flutter run
选择你想运行的手机,或者模拟器上,
- 如果你想运行iOS项目,则先打开ios/Runner.xcworkspace项目,设置运行到真机/模拟器上的签名
- 如果你想运行安卓项目,则先打开android项目,设置相关参数
app运行到真机/模拟器的步骤的教程百度上很多,自行搜索
4.最基本最基础的Flutter代码编写
在flutter中,所有的东西都是widget(组件),所以,我们先把lib/main.dart文件里的代码删除,然后粘贴以下代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
重新运行项目,看看效果。代码链接
结构非常简单!
- 一个main函数,程序入口
- 一个Flutter app本身就是就一个widget
- 大部分的widget都有一个build()函数,在build()函数内返回布局和组件
- MaterialApp是google提供的Material一套UI库的组件
- 界面上显示的内容都是通过Scaffold组件来布局的
看这篇文章,你就对Dart有了初步的认识了
https://flutter.dev/docs/get-started/codelab
整个布局的树形结构图
布局的方式:
- Flutter默认的Container的布局,Container里套着Row和Column,Row和Column里可以继续套着Container
5.Flutter原理
这张图的地址:传送门
Flutter是Google开源的一套UI框架,跨平台,也就是可以发行在iOS、Android、macOS、Linux这些平台上运行,当然了,华为鸿蒙手机OS肯定也可以的。
如图所示,整个Flutter的上层UI、动画、绘制、手势、基础库都是完全使用Flutter实现的,代码完全开源,也就是你说你点击该framework里的Widget,都可以直接看到源代码的实现。底层引擎使用C/C++实现的,这个没有什么好说的。
重点:
- 关乎你每天都用到的
- 使用
MaterialApp
的布局是类Android原生样式 - 使用
CupertinoApp
的布局是类iOS的原声样式
比如,博主初学Flutter,开发了类似某个app的图文首页,如下图:iOS & Android & Web H5
以上代码
Demo项目下载:https://github.com/VictorZhang2014/first_simple_flutter_project/tree/master
参考
1.官方教程macOS
2.DART编程语言中文教程
3.Flutter的widget布局基础教程
4.美团Flutter原理与实践