Flutter四:Flutter基础知识

一、入口

  1. 每一个Flutter项目的lib目录下都有一个Main.dart文件,这个文件中有一个main(),他就是程序的入口:void main() => runApp(MyApp());
    main函数中调用了runApp 方法,它的功能是启动Flutter应用。runApp它接受一个Widget参数,在本示例中它是一个MyApp对象,MyApp()是Flutter应用的根组件。
    main函数使用了(=>)符号,这是Dart中单行函数或方法的简写。
  2. MaterialDesign设计风格
    每一个.dart文件的第一行几乎都会导入flutter/mainteril.dart包:import 'package:flutter/material.dart';,这个包flutter实现MaterialDesign设计风格的基础包,里边有文本输入框、图标、图片、行列等布局。

二、Flutter主题

为了在真个应用中使用同一套颜色和字体样式,使用主题来实现。定义主题有两种,全局主题和使用Theme定义程序局部的颜色和字体。
定义主题后,可以在应用中使用。

  1. 创建应用主题
theme: ThemeData(primaryColor: Colors.red),
  1. 局部主题
    实例化一个ThemeData并将其传递给Theme对象,代码:
Theme(
      data: ThemeData(accentColor: Colors.yellow),
      child: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  1. 使用主题
 return Text(
      "SQUARE",
      style: TextStyle(color: Theme.of(context).accentColor),
    );

三、组件

  1. 概念:组件(Widget)是Flutter应用程序用户界面的基本构建块。
    一切皆组件:
  2. 组件嵌套
    复杂的功能界面都是由一个一个简单功能组件组装完成。有的组件负责布局、有的组件负责定位、有的组件负责调整大小、有的组件负责动画处理等等
class _HomeScreen extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Text("首页"),
      ),
    );
  }
}
  1. 组件分类
    基本组件
    MaterialDesign组件
    布局组件
    容器组件
    滚动组件
    功能性组件
    动画组件
    自定义组件

  2. 构建组件
    重写Widget的build方法来构建一个组件。

class _HomeScreen extends State {
  @override
  Widget build(BuildContext context) {
  }
}
  1. 组件的状态
    ①无状态组件(StatelessWidget):是不可变的,他们属性不能变,都有属性都是最终的。
    ②有状态组件(StatefulWidget):持有的状态可能在Widget生命周期中发生变化。实现一个StatefulWidget至少需要两个类:
class KnowledgePage extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return _KnowledgePage();
  }
}

class _KnowledgePage extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('KNOWLEDGE');
  }
}
  • StatefulWidget 类:
  • state类::StatefulWidget本身是不变的,但是state类在Widget生命周期中始终存在。

四、使用包资源

类似Android中的gradle
导入包有三种方式:

  1. 本地写的功能,导入pkg下的sum包,里边方法和变量都可以使用了
import 'pkg/sum.dart';
  1. 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));
  1. 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。

你可能感兴趣的:(Flutter四:Flutter基础知识)