文章目录
初识Flutter
什么是Flutter
Flutter 是 Google 推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter 提供了丰富的组件、接口,开发者可以很快地为 Flutter 添加 Native 扩展。
Flutter 与用于构建移动应用程序的其它大多数框架不同,因为 Flutter 既不使用 WebView,也不使用操作系统的原生控件。 相反,Flutter 使用自己的高性能渲染引擎来绘制 Widget(组件)。这样不仅可以保证在 Android 和iOS 上 UI 的一致性,也可以避免对原生控件依赖而带来的限制及高昂的维护成本。
Flutter框架结构
- Framework即框架层,这是一个纯Dart实现的SDK,实现了一套基础库。
- Engine即引擎层,这是Flutter的核心,由C++实现,其中包含了Skia引擎、Dart运行时、文字排版引擎等,在代码调用
dart:ui
库时,最终会走到引擎层,实现真正的绘制和显示。 - Embedder即嵌入层,Flutter最终渲染、交互是要需要依赖其所在平台的操作系统API,主要将Flutter引擎安装到特定平台上。嵌入层使用当前平台的语言,用于调用当前平台的API。
首个Flutter应用
目录结构
- android::Android源代码目录。
- ios:IOS源代码目录。
- lib:Flutter项目的核心目录,存放flutter源代码。
- test:测试代码目录。
- pubspec.yaml:Flutter项目的配置文件,类似于Android的build.gradle。
导包
import 'package:flutter/material.dart';
这里指导入Material UI组件库。
应用入口
void main() {
runApp(const MyApp());
}
Flutter项目结构
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '任务栏标题',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: '首页标题'),
);
}
}
在Flutter中,绝大多数组件、布局方式、手势等都是以Widget形式提供的。
- MyApp 表示Flutter应用,继承自StatelessWidget类,本质是一个widget。
- MateriaApp 是Flutter Material库提供的App框架,可以设置应用的名称、主题、首页、路由等。
- home 是Flutter应用的首页。
首页
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'首页',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
- MyHomePage 是应用首页,继承自StatefulWidget类,是一个有状态的widget。
- _MyHomePageState 是组建的状态类,记录状态值,当点击按钮时会触发
_incrementCounter()
,变量_counter
会+1,接着会调用setState()
,setState()
会通知Flutter框架,Flutter框架收到通知会执行build()
根据新的状态重构界面,Flutter对该方法做了优化执行变的很快。 - Scaffold 是Material库提供的页面脚手架,可以设置导航栏、标题、页面的内容。
设置app名称、图标
Android设置app名称、图标
- label:设置app名称
- icon:设置图标
- mipmap-mdpi、mipmap-hdpi、mipmap-xdpi、mipmap-xxdpi、mipmap-xxxdpi目录用于存放具体图片,
mipmap-mdpi 放置48*48的图标,mipmap-hdpi存放72*72,mipmap-xdpi存放96*96,mipmap-xxdpi存放144*144,mipmap-xxxdpi存放192*192
IOS设置app名称、图标
- CFBundleName:设置app名称
pubspec.yaml配置文件说明
name: myflutter #设置包名
description: A new Flutter project. #当前项目描述
publish_to: 'none'
version: 1.0.0+1 #版本名+版本号
environment: #支持Dart SDK版本
sdk: ">=2.12.0 <3.0.0"
dependencies: #项目依赖库
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
flutter:
uses-material-design: true #使用Material组件
assets: #资源文件
- images/logo.png
- images/pub.png
- images/user.png
- images/avatar.jpg