Flutter 简介（事件、路由、异步请求）

2023年1月21日 196次阅读 来源: c-137Summer

1. 前言

Flutter是一个由谷歌开发的开源移动应用软件开发工具包，用于为Android和iOS开发应用，同时也将是Google Fuchsia下开发应用的主要工具。其官方编程语言为Dart。

同为跨端开发的react-native的语言是JavaScript，RN是通过原生之间桥接来实现，而flutter是通过dart虚拟机直接编译。

这篇就不和 React-Native 进行详细对比 ，而是从前端开发的角度来看flutter。

 

2. Dart简介

Dart 比 JAVA 简单，易于理解，比 JavaScript 更加规范，更加工程化，兼具静态和动态语言的一些特性。

  • 强类型，可以直接生命变量类型，也可以类型推断；支持可选类型，用户可以像JavaScript一样写弱类型的定义，也可以确定类型。你可以写出动态语言风格的代码，也可以写出类似于传统静态风格的代码。Dart的类型推导使用final,var,const,dynamic关键字；
  1. var修饰变量；
  2. final表示不可变的，修饰内置数据类型，值不可变；修饰对象表示引用不可变，使用到的频率很高；
  3. const是编译时常量，他表示始终不可变，无论修饰内置类型还是对象，或者是数据结构；
  4. dynamic是任意类型，有点像java里面的Object，Kotlin中的Any。
  • 单线程异步事件模型, 独特的隔离区( Isolate )，可以实现多线程；Dart是基于单线程模型的语言。但是在开发当中我们经常会进行耗时操作比如网络请求，这种耗时操作会堵塞我们的代码，所以在Dart也有并发机制，名叫isolate。APP的启动入口main函数就是一个类似Android主线程的一个主isolate。和Java的Thread不同的是，Dart中的isolate无法共享内存，类似于Android中的多进程。
  • DartVM，具有极高的运行效率和优秀的代码运行优化；
  • 面向对象编程，一切数据类型均派生自 Object ；
  • 运算符重载，泛型支持；
  • 异步API： Future （async/await）和 Stream（异步事件流） 模型,可以简单实现高效的代码；
  • Minix 特性，可以更好的实现方法复用；
  • 在语法上，Dart 提供了很多便捷的操作，可以明显减少代码量。比如字符连接，可以直接 "my name is $name, age is $age"，无需+号拼接，也无需做类型转换（相当于ES6的模板字符串）。

更多参见官方文档

 

3. 从前端的角度看Flutter 

对于前端来说，页面就分为 HTML+CSS+JS

页面结构和样式  Flutter for Web 

对于习惯了html+css结合chrome devtools 完成UI效果的前端开发来说，刚开始用这种方式极其不习惯。

本来简单的一个结构和一个样式，加个背景色，渐变这种，css轻松搞定，然而，用widget来就要嵌套好多层，只能说，习惯习惯就好了。。

 

3.1 先来认识一下Flutter

Hello word入门

lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// StatelessWidget和StatefulWidget两种 
// 两者的区别在于状态的改变，StatelessWidget面向那些始终不变的UI控件；而StatefulWidget则是面向可能会改变UI状态的控件。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',  // Title 是用来定义任务管理窗口界面所看到应用名字的
      home: Scaffold(
        appBar: AppBar(  // 导航栏
          title: Text('Welcome to Flutter'),
        ),
        body: Center( 
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

 

3.2 路由跳转传参

在前端传参很简单，是直接携带携带参数（params和query）跳转路由页面的

flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。

分两种方法 push 和 pushNamed

3.2.1 静态路由的注册

return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter实例'),
      routes: <String, WidgetBuilder> {
        // 这里可以定义静态路由，不能传递参数
        '/login': (BuildContext context) => new SecondPage(),
        '/register': (BuildContext context) => new RouterHomePage(),
      },
    );

3.2.2 静态路由的使用

onPressed: () {
      Navigator.of(context).pushNamed("/register");  // or
　   Navigator.pushNamed(context, '/register')
},

3.2.3 动态路由的使用

Navigator.of(context).push(
MaterialPageRoute(builder: (_) {
       return new SecondPage(title: '传参过去');
}));

3.2.4 关闭页面

Navigator.pop(context); // or
Navigator.of(context).pop();
Navigator.pop(context,"携带参数");  // 可携带参数

3.2.5 push , pushNamed 传参

Pass arguments to a named route

https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

用 ModalRoute.of（）和onGenerateRoute（）封装路由及传参方法

push方法封装，有一个缺点就是不能只在主页面定义导入跳转的页面，略有代码重复

用pushNamed封装参数传递方法，试了下只有无状态widget支持，有状态的貌似不支持

main.dart

import 'package:flutter/material.dart';
import 'package:app/pages/login/login.dart';
import 'package:app/pages/login/register.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 定义路由信息
  final Map<String, Function> routes = {
    '/register': (context, {arguments}) => RegisterPage(arguments: arguments),  // 可传参到register页面
    '/login': (context) => LoginPage(), // 不设置传参login页面
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter',
      // 处理Named页面跳转 传递参数
      onGenerateRoute: (RouteSettings settings) {
        // 统一处理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (settings.arguments != null) { // 如果参数不为空，则设置可传参
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        } else {
          // 不设置路由传参
          final Route route = MaterialPageRoute(
              builder: (context) => pageContentBuilder(context));
          return route;
        }
      },
      theme: new ThemeData(primarySwatch: Colors.red),
      home: AppPage(),
    );
  }
}

从login跳转到register的时候，携带参数，并在register页面显示相应参数

login.dart

import 'package:app/pages/login/register.dart';

onPressed: () => {  // 点击按钮跳转事件
      Navigator.push( // push方法--支持StatelessWidget和StatefulWidget
        context,
        MaterialPageRoute(
        builder: (context) => RegisterPage(),
        settings:RouteSettings(arguments: {'title': '手机号注册'})))

      // or pushNamed 方法 -- 支持StatelessWidget
      // Navigator.pushNamed(context, '/register',
      //     arguments: {'title': '手机号注册'})
},

 

register.dart 接收参数–push方法的接收

class RegisterPage extends StatefulWidget {
  RegisterPage({
    Key key,
    this.arguments,
  }) : super(key: key);
  final Map arguments;

  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
    @override

     Widget build(context) {
    // 参数的接收显示
    final Map args = ModalRoute.of(context).settings.arguments;
    
    return Scaffold(
      appBar: AppBar(
        title: Text(args['title']),
      ),
    body: Center(
        child: Text('register'),
      ),
  }
}

 register pushNamed方法传递的接收

class ForgetPage extends StatelessWidget {
  ForgetPage({this.arguments});
  final Map arguments;

  @override
  Widget build(context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("参数：${arguments != null ? arguments['id'] : '0'}"),
      ),
      body: Center(
             child: Text('register'),
      ),
  }
}

 

3.3 事件触发

3.3.1 触发按钮的点击事件 

https://book.flutterchina.club/chapter3/buttons.html

（1）RaisedButton 漂浮按钮 （2）FlatButton 扁平按钮 （3） OutlineButton  （4） IconButton 

  几种按钮，触发事件都是 onPressed 点击事件

 

3.3.2 手势识别GestureDetector

https://book.flutterchina.club/chapter8/gesture.html

常见事件：点击、双击、长按

 

3.3.3 toast , alert 等弹窗

toast可直接安装 fluttertoast 包进行使用  https://pub.dev/packages/fluttertoast 

alert, confirm 弹窗使用

部分代码

import 'package:flutter/material.dart';
onTap: () => showDialog(
    context: context,
    builder: (_) => _generateAlertDialog("我是弹框的内容")),
)


_generateAlertDialog(String contents) {
    return AlertDialog(
      title: Text('这是标题'),
      content: Text(contents),
      actions: <Widget>[
        FlatButton(
          child: Text('取消'),
          onPressed: () {
            Navigator.of(context).pop(); // 点击取消关掉弹窗
          },
        ),
        FlatButton(
          child: Text('确认'),
          onPressed: () {
            Navigator.of(context).pop(); // 点击确认关掉弹窗再跳转到别的页面
　　　　　　　　Navigator.of(context).pushNamed('/register');
          },
        ),
      ],
    );
  }

 

4. 异步请求

flutter中的请求方式

 

  • Dart 原生的网络请求 HttpClient
  • 库 http
  • Flutter中文网发布的 dio

 

4.1 HttpClient

4.2 使用官方 http 库

 https://flutter.dev/docs/cookbook/networking/fetch-data

4.3 使用 dio http请求框架 

https://book.flutterchina.club/chapter10/dio.html

dio比较流行的一个请求包，它支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传、文件下载等

先看简单的请求

import 'dart:async';
import 'package:dio/dio.dart';

var dio = new Dio();

void getHttp() async {
  try {
    Response response = await dio.get("http://www.google.com");
    print(response);
  } catch (e) {
    print(e);
  }
}

 

可以封装一个通用请求模板，利用拦截器一并处理通用模块-比如请求前加loading, 结束关闭loading, 统一网络请求错误处理等

utils文件夹下的 net.dart

import 'dart:async';
import 'package:dio/dio.dart';

Dio dio;

class NetRequest {
  static Future<Dio> instance() async{
    if (dio == null) {
      dio = new Dio();
    }
    //添加拦截器
    dio.interceptors.add(
      InterceptorsWrapper(
        onRequest: (RequestOptions options) {
          print("请求之前");
          // Do something before request is sent
          return options; //continue
        },
        onResponse: (Response response) {
          print("响应之前");
          // Do something with response data
          return response; // continue
        },
        onError: (DioError e) {
          print("错误之前");
          // Do something with response error
          return e; //continue
        },
      ),
    );
    return dio;
  }

  static Future get(String url, Map<String, dynamic> params) async {
    var response = await (await instance()).get(url, queryParameters: params);
    print(response.data.toString());
    return response.data;
  }

  static Future post(String url, Map<String, dynamic> params) async {
    var response = await (await instance()).post(url, data: params);
    print(response.data.toString());
    return response.data;
  }
}

 

发起请求

import 'package:flutter/material.dart';
import 'package:app/utils/net.dart';

class MyFriends extends StatefulWidget {
  MyFriends({Key key}) : super(key: key);

  @override
  _MyFriendsState createState() => _MyFriendsState();
}

class _MyFriendsState extends State<MyFriends> {
  void _getInfo() async {
    Map list = await NetRequest.get(url,{});
    print(list); // 发起get请求之后获得的数据
  }

  @override
  void initState() {
    super.initState();
    _getInfo();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text('friends'),
      ),
    );
  }
}

post 请求同理

 

4. 开发者工具

https://flutter.github.io/devtools

Dart DevTools还是预览版，目前功能也还比较简单

VsCode   Dart: Open DevTools命令打开

 

5. 后记

刚开始写flutter各种不习惯，和js的模式不一样，更偏向于后端语言，作为跨端语言的新秀，又有Google这颗大树，设计之初就是作为跨多终端来实现的，这两年的发展也很快，国内很多团队有些已经在使用了。

官方发布版本也很勤，随着生态的逐渐完善，还是有很大的发展空间的，值得期待。

 

参考：

Flutter 官网

科普Dart语言

Flutter 中文网

    原文作者：c-137Summer
    原文地址: https://www.cnblogs.com/leiting/p/11031888.html
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞