Fair 2.0 release! What’s new

# Counting计数器

学习很多语言的时候都有hello world,在Flutter里面他的Hello World是个counting计数器。下面我们把这个计数器转换为Flutter Fair。

counting工程是模板工程,只需要利用flutter create就可以创建。不同版本可能会略有差异,但是差不太多。核心内容如下:

  • 一个文本标签,展示计数值
  • 一个按钮,更新计数

# 预览效果

Flutter Fair
counting old counting new

# Dart源码

参考源码:

  • main.dart
import 'package:fair/fair.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# Fair改造

# 改造原始界面(添加@FairPatch(),后续通过Fair Compiler工具编译,可生成目标动态文件)

()
class MyHomePage extends StatefulWidget {
  
  MyHomePage({Key key, this.data}) : super(key: key) {
    title = data['title'];
  }

  String title;
  dynamic data;

  
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  // 定义与JS侧传递的参数,只能传递一个Map类型
  ()
  var fairProps;

  int _counter = 0;
  var _title;

  // JS生命周期方法--在JS加载完成自动调用
  void onLoad() {
    _title = fairProps['title'];
  }

  
  void initState() {
    super.initState();
    // 此处fairProps需要在onLoad 外部赋值,JS中会自动赋值
    fairProps = widget.data;
    onLoad();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              // 暂不支持 style: Theme.of(context).textTheme.headline4,
              // 可替换成:
              style: TextStyle(fontSize: 40, color: Color(0xffeb4237), wordSpacing: 0),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# main.dart

# 修改main方法和引用

import 'dart:convert';
import 'package:fair/fair.dart';
import 'package:flutter/material.dart';

void main() {
    WidgetsFlutterBinding.ensureInitialized();

    FairApp.runApplication(
        _getApp(),
        plugins: {},
    );
    // runApp(MyApp());
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 对接原方法


dynamic _getApp() => FairApp(
  modules: {},
  delegate: {},
  child: MyApp(),
);

1
2
3
4
5
6
7

# 替换Home入口

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
              visualDensity: VisualDensity.adaptivePlatformDensity,
            ),
            // home: MyHomePage(data: {'title': 'Flutter Demo Home Page'}));
            home: FairWidget(
                    name: '58 Fair',
                    path: 'assets/bundle/lib_main.fair.json',
                    data: {
                      'fairProps': jsonEncode({'title': '58 Fair'})
                    }));
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上次更新: 2022/4/18 15:39:40
Copyright © 2020 58.com | Powered by The Fair Authors