Flutter四:Flutter基础知识
2020-05-14 本文已影响0人
Anwfly
一、入口
- 每一个Flutter项目的lib目录下都有一个Main.dart文件,这个文件中有一个main(),他就是程序的入口:
void main() => runApp(MyApp());
main函数中调用了runApp 方法,它的功能是启动Flutter应用。runApp它接受一个Widget参数,在本示例中它是一个MyApp对象,MyApp()是Flutter应用的根组件。
main函数使用了(=>)符号,这是Dart中单行函数或方法的简写。 - MaterialDesign设计风格
每一个.dart文件的第一行几乎都会导入flutter/mainteril.dart包:import 'package:flutter/material.dart';
,这个包flutter实现MaterialDesign设计风格的基础包,里边有文本输入框、图标、图片、行列等布局。
二、Flutter主题
为了在真个应用中使用同一套颜色和字体样式,使用主题来实现。定义主题有两种,全局主题和使用Theme定义程序局部的颜色和字体。
定义主题后,可以在应用中使用。
- 创建应用主题
theme: ThemeData(primaryColor: Colors.red),
- 局部主题
实例化一个ThemeData并将其传递给Theme对象,代码:
Theme(
data: ThemeData(accentColor: Colors.yellow),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
- 使用主题
return Text(
"SQUARE",
style: TextStyle(color: Theme.of(context).accentColor),
);
三、组件
- 概念:组件(Widget)是Flutter应用程序用户界面的基本构建块。
一切皆组件: - 组件嵌套
复杂的功能界面都是由一个一个简单功能组件组装完成。有的组件负责布局、有的组件负责定位、有的组件负责调整大小、有的组件负责动画处理等等
class _HomeScreen extends State<HomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Text("首页"),
),
);
}
}
-
组件分类
基本组件
MaterialDesign组件
布局组件
容器组件
滚动组件
功能性组件
动画组件
自定义组件 -
构建组件
重写Widget的build方法来构建一个组件。
class _HomeScreen extends State<HomePage> {
@override
Widget build(BuildContext context) {
}
}
- 组件的状态
①无状态组件(StatelessWidget):是不可变的,他们属性不能变,都有属性都是最终的。
②有状态组件(StatefulWidget):持有的状态可能在Widget生命周期中发生变化。实现一个StatefulWidget至少需要两个类:
class KnowledgePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _KnowledgePage();
}
}
class _KnowledgePage extends State<KnowledgePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Text('KNOWLEDGE');
}
}
- StatefulWidget 类:
- state类::StatefulWidget本身是不变的,但是state类在Widget生命周期中始终存在。
四、使用包资源
类似Android中的gradle
导入包有三种方式:
- 本地写的功能,导入pkg下的sum包,里边方法和变量都可以使用了
import 'pkg/sum.dart';
- SDK中的包
正常使用:
import 'dart:math';
var maxNum = max(2, 3);
print(maxNum);
延时加载库,或者叫按需加载库
//延时加载
import 'dart:math' deferred as newMath;//重新命名
//延时加载
newMath.loadLibrary();
var random = new newMath.Random();
print(random.nextInt(10));
- pup中的依赖
pup官网
第三方库要到pup找,相当于Android的jcenter
使用步骤:
//1.pubspec.yaml/dependencies下添加自己要添加的依赖:
dependencies:
english_words: ^3.1.3
//2.点击工具右上角PackageGet或者执行命令: pub get获取依赖中的资源
//3.在使用的文件中个使用
//在该文件中导入包
import 'package:english_words/english_words.dart';
//获取一个随机单词
var wordPair = new WordPair.random();
- 常用三方库
图标库:cupertino_icons: ^0.1.2
网络库: dio: ^3.0.3
Cookie: dio_cookie_manager: 1.0.0
轻量级数据存储: shared_preferences: ^0.4.3
intro_slider: intro_slider: ^2.2.6
轮播图: flutter_swiper: ^1.1.6
Toast插件: fluttertoast: ^3.1.0
WebView插件:flutter_webview_plugin: ^0.3.8
[webview_flutter]: webview_flutter: ^0.3.9+1
数据: sqflite: ^1.1.3
文件读写: path_provider: ^0.5.0+1
event_bus: event_bus: ^1.1.0
synchronized: #synchronized: '>=0.1.0 <3.0.0'
synchronizedrxdart: #rxdart: ^0.22.1
处理键盘事件: keyboard_actions: ^2.1.1+1
启动URL的插件: url_launcher: 5.1.0
图片缓存: cached_network_image: ^1.1.1
Dart 常用工具类库: common_utils: ^1.1.3
Flutter 常用工具类库: #flustars: 0.2.6+1
侧滑删除: flutter_slidable: ^0.5.3
列表悬浮头: sticky_headers: ^0.1.8
[share 分享]: share: ^0.6.1+1
上拉加载和下拉刷新的组件: pull_to_refresh: ^1.5.4
解析html标签: flutter_html: ^0.10.4
Html Encoder/Decoder: html_unescape: ^1.0.1+3
[文字、屏幕适配]: flutter_screenutil: ^0.6.0
五、网络请求
HTTP协议通常用于前后端交互数据。Flutter请求网路有三种方法,一种是Http请求,一种是HTTPClient请求,还有一种是Dio。