flutter分享

用户昵称吧

已于 2022-01-24 18:38:51 修改

阅读量310

点赞数

文章标签： flutter android ios

于 2022-01-11 00:03:46 首次发布

本文链接：https://blog.csdn.net/qq_36222731/article/details/84348289

版权

概述

移动开发的方式：混合开发，一套代码，多端运行。

目前比较的成熟的方案是：ReactNative和Flutter，各有优劣，开源社区也都非常活跃。

Flutter 应用产品

ReactNative:

实现方式：使用JS代码构建一个跨平台APP，RN 把应用的JS代码（包括依赖的framework）编译成一个js文件，IOS上直接使用内置的javascriptcore，在Android 则使用webkit.org官方开源的jsc.so来运行js脚本文件。

如果是js 扩展的API，则直接通过bridge调用native方法；

如果是UI界面，通过bridge （JS和Nactive 的通信桥梁）把数据传递传递到native ，然后根据数据属性设置各个对应的真实native的View，也就是界面控件会映射原生控件去加载。

缺点：原生控件承载界面渲染，系统升级和api变化会带来不稳定性。

Flutter框架：

Flutter框架包含了：frameWork层是一个UISDK，Engine层有Skia图像渲染引擎和Dart的接口，Embedder 是操作系统适配层。总而言之：flutter 一个纯UI渲染框架；

下面从四个方面分享使用futter实现混合开发的过程：

1、flutter的应用是什么样子，如何构建UI

2、第三方开源框架是否全面

3、flutter如何与原生应用混编

4、如何实现调用系统原生的能力

一、flutter的应用是什么样子，如何构建UI

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());   //应用入口：main.dart文件下的main函数
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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) { //_counter对象改变，回调build
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Flutter 界面的核心设计思想便是:一切皆 Widget ,从最顶层的app就是widget，到下面任何的ui元素都可以封装成widget，像客户端常用的视图（View）、视图控制器（View Controller）、活动（Activity）等，在 Flutter 中都是 Widget。

界面的改变通过state设置状态来实现。

Flutter应用通过Dart语言编写：支持运行时编译（JIT）模式，修改代码后可直接热重载。

二：flutter目前的开源库

Dart和Flutter应用程序的官方软件包存储库：Dart packages

SVGA，RxDart ，HTTP，shared_preferences等等，

使用网络请求数据，加载到列表的常见需求：

pubspec.yaml【flutter应用工程配置文件】导入相关的库

dio: ^3.0.7 //网络请求
json_annotation: ^2.4.0 //json


class _SampleAppPageState extends State<SampleAppPage> {
  List widgets = [];
  @override
  void initState() {
    super.initState();
    loadData();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Sample App"),
        ),
        body: new ListView.builder(
            itemCount: widgets.length,
            itemBuilder: (BuildContext context, int position) {
              return Container(
                //内容文字
                child: new Text(" ${widgets[position]["id"]}"
                    + "${widgets[position]["title"]}"),
                //下横线
                decoration: BoxDecoration(border:
                Border(bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
                //边距
                padding: new EdgeInsets.all(10.0),
              );
            }));
  }

  loadData() async {
    String dataURL = "https://jsonplaceholder.typicode.com/posts";
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = json.decode(response.body);
    });
  }
}

实现的效果就是如下：

三：flutter混编入原生工程

方式：将flutter模块打包成aar，供原生android调用（iOS 使用 pod），三端代码分离；

操作：

a、在安卓app同级目录下可以创建 Flutter 模块：Flutter create -t module flutter_library
b、flutter模块实现功能后打包aar（Flutter build apk --debug）

打包aar的项目结构如下：原生工程导入aar，添加依赖即可使用

四：flutter调用系统原生的能力

Flutter 并没有提供对原生页面操作的方法，所以通过：

在flutter界面打开一个安卓原生界面的流程，查看flutter调用原生系统的方式

1、首先在android应用打开一个flutter界面：

安卓将flutter界面打包成flutterView加载

public class FlutterPageActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();

        FlutterView flutterView = Flutter.createView(this,getLifecycle(),"defaultRoute");
        setContentView(flutterView);
    }

}

2、flutter应用操作：

a、打开aroute对应界面；

b、通过注册方法通道（MethodChannel）的方式打开安卓界面

void main() => runApp(_widgetForRoute(window.defaultRouteName));
const platform = MethodChannel('samples.demo/navigation'); //注册方法通道

Widget _widgetForRoute(String route) {
  switch (route) {
    default: //对应路由类型
      return MaterialApp(
        home:DefaultPage(showBack: true),
      );
  }
}

class DefaultPage extends StatelessWidget {
  DefaultPage({Key key, this.showBack=false }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Flutter Default Page"),),
        body: Center(
          child: Column(
            children: <Widget>[
              RaisedButton(
                  child: Text("Go Page A"),
                  //通过注册的方法：openNativePage 点击打开安卓界面
                  onPressed: ()=>platform.invokeMethod('openNativePage') 
              )
            ],
          ),
        )

    );
  }
}

3、android应用实现方法通道，并响应打开界面

public class FlutterPageActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        FlutterView flutterView = Flutter.createView(this,getLifecycle(),"defaultRoute");
       
       //注册方法通道 --方法通道识别：samples.demo/navigation--
        new MethodChannel(flutterView, "samples.demo/navigation").setMethodCallHandler(
                new MethodChannel.MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, MethodChannel.Result result){
                        //注册的方法：openNativePage
                        if(call.method.equals("openNativePage")) {
                            //打开安卓页面
                            Intent intent = new Intent(FlutterPageActivity.this, AndroidActivity.class);
                            startActivity(intent);
                            
                            //返回数据给flutter
                            result.success(0);
                        } else {
                            //方法未实现
                        }
                    }
                });
        setContentView(flutterView);
    }
}

以上demo实现了，在安卓项目中混编flutter模块，实现双方调用的功能。

谢谢！