跨端应用Flutter初体验

Posted 2021-04-29 Sumslack团队

概述

Google开源的跨端应用解决方案，官方介绍：

Flutter allows you to build beautiful native apps on ios and android from a single codebase

Flutter是谷歌开源的移动UI框架，可在iOS和Android快速创建原生用户界面，Flutter是完全免费和开源的，其中脚本语言采用Dart。

Flutter组件采用现代响应式框架构建，从React中获得灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子，当组件状态改变，组件会重构它的描述(description)，Flutter会从底层渲染树将当前状态转换到下一个状态所需要的最小更改。

Windows环境搭建

• 在环境变量中配置

1export PUB_HOSTED_URL=https://pub.flutter-io.cn
2export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 系统要求：需要Windows 7.0/Windows 7.0+，安装Git命令；

• 从flutter.io官网下载最新包，解压到非系统盘目录；

• 如果你使用android studio开发安卓应用，必须在您的机器上安装有android sdk；

• 运行目录下的flutter_console.bat，在Dos中输入flutter doctor安装依赖并自行编译，可能需要10几分钟，请耐心等待，如果flutter命令无法显示，请将安装目录的bin的目录加入到path路径下；

• 在android studio中安装flutter插件，在应用商店搜索flutter安装即可；

• 安装完Dard-SDK和Flutter-SDK后，你无需使用android studio开发，利用轻量级的vs code照样可以开发flutter应用，比如我的环境：

注：只需要在vs code中安装插件dart和flutter，利用flutter create xxx新建一个flutter项目，利用flutter emulators列出本机AVD列表，选一个模拟器运行：flutter emulators launch AVD_ID即可，在vscode中修改代码，只需要在终端中输入“r”即可实时在模拟器中看到效果，非常轻量和方便。

从一个例子说起

我们实现一个用户列表，显示最近使用我们sumslack服务的用户列表，并在列表中显示头像，效果如下图：

技术点：

1. 通过http异步获取用户列表；

2. json解析；

3. ListView显示；

Flutter采用Dart语言编写，支持热部署，修改代码后即可在手机在看到实时效果，一个最简单的Hello World的例子如下，从中可看到项目结构：

 1import 'package:flutter/material.dart';
 2
 3void main() => runApp(new MyApp());
 4
 5class MyApp extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return new MaterialApp(
 9      title: 'Welcome to Flutter',
10      home: new Scaffold(
11        appBar: new AppBar(
12          title: new Text('Welcome to Flutter'),
13        ),
14        body: new Center(
15          child: new Text('Hello World'),
16        ),
17      ),
18    );
19  }
20}

代码结构分析

• 本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。

• main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。

• 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。 在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)

• Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。

• widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。

• 本示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。 Center widget可以将其子widget树对其到屏幕中心。

基础以上最简单的示例，在我们构建用户列表这个app时，首先主体结构和hello world例子并无差异，如下dart代码：

 1import 'package:flutter/material.dart';
 2import 'package:hello_world/homepage.dart';
 3
 4void main() => runApp(new MyApp());
 5
 6class MyApp extends StatelessWidget {
 7  @override
 8  Widget build(BuildContext context) {
 9    return new MaterialApp(
10        title: '用户列表',
11        theme: new ThemeData(
12          primarySwatch: Colors.orange,
13        ),
14        home: new MyHomePage()
15    );
16  }
17}

页面的主体内容是一个ListView，ListView里每个ListItem又是一个复杂Widget，采用Row和Column的布局容器即可实现，MyHomePage.dart代码如下：

 1import 'package:flutter/material.dart';
 2import 'package:dio/dio.dart';
 3import 'dart:convert' show json;
 4
 5Dio dio = new Dio();
 6
 7class MyHomePage extends StatefulWidget {
 8  @override
 9  State<StatefulWidget> createState() {
10    return new _MyHomePageState();
11  }
12}
13
14class _MyHomePageState extends State<MyHomePage>{
15  List<Model> _items = [];
16
17  @override
18  void initState() {
19    super.initState();
20    _getListDate();
21  }
22
23  @override
24  Widget build(BuildContext context){
25    return new Scaffold(
26        appBar: new AppBar(
27          title: new Text("用户列表"),
28        ),
29        body: new ListView.builder(itemCount: _items.length,itemBuilder: itemView,)
30    );
31  }
32
33  Widget itemView(BuildContext context,int index){
34    Model model = this._items[index];
35    if(index.isOdd) return new Divider(height:2.0);
36    return new Container(
37        color:Color.fromARGB(0x22, 0x49, 0x49,0x8d),
38        child: new Padding(
39            padding: const EdgeInsets.all(8.0),
40            child: new Padding(
41                padding: const EdgeInsets.all(8.0),
42                child: new Column(
43                  children: <Widget>[
44                    new Row(
45                        children: <Widget>[
46                          Image.network('${model.avator}',width: 70,height: 70,),
47                          new Text('  ${model.uid}',style: new TextStyle(fontSize: 20.0)),
48                        ]
49                    ),
50                    new Center(
51                      heightFactor: 2.0,
52                      child: new Text("${model.nickname}",style: new TextStyle(fontSize: 25.0),),
53                    )
54                  ],
55                )
56            )
57        )
58    );
59  }
60
61  void _getListDate(){
62    //列表来自http请求
63    Future<Response<String>> response= dio.get("http://wx.sumslack.com/restful/stat/userList.jhtml?p=1");
64    response.then((item)  {
65      List<Model> widgets = [];
66      final dynamic dataJson = json.decode(item.data);
67      final List resultList = dataJson['result'];
68      resultList.forEach((dynamic _user)  {
69        print(_user["nickname"]);
70        widgets.add(new Model(_user["uid"],_user["nickname"],_user["avator"]));
71      });
72      setState(() {
73        _items= widgets;
74      });
75    });
76  }
77
78}
79
80class Model {
81  String uid;
82  String nickname;
83  String avator;
84  Model(this.uid,this.nickname,this.avator);
85}

相比阿里开源的Weex，flutter能更好的替代native页面展现复杂的交互页面，性能也更好，weex用来展现内容页面更加合适，还有就是表单类的页面，但对于复杂的页面交互，weex性能略差。

如果你没接触过weex，并且对vue也并不熟悉，那么，笔者强烈建议您使用Flutter作为您的跨端应用解决方案。

你可以继续阅读：

|| |  |  |  |  |  |  |