指南

    资料

    # # 从零开始写一个Demo 在Fair接入完成后，我们需要一个bundle才能更显示动态页面，那么怎么编写bundle呢？ 这一节我们一起写一个demo页面，并逐步将demo做一些复杂调整。 ## # 1. 编写红色方块 首先我们写一个红色方块的代码。 下面的代码完全使用flutter编写，入参是一个文本。 
    1. class DynamicWidget extends StatelessWidget {
    2.   final String content;
    3.   const DynamicWidget({Key key, this.content}) : super(key: key);
    5.   @override
    6.   Widget build(BuildContext context) {
    7.     return Center(
    8.       child: Container(
    9.         child: Text(
    10.           content,
    11.           style: TextStyle(fontSize: 30, color: Colors.yellow),
    12.         ),
    13.         alignment: Alignment.center,
    14.         margin: EdgeInsets.only(top: 30, bottom: 30),
    15.         color: Colors.redAccent,
    16.         width: 300,
    17.         height: 300,
    18.       ),
    19.     );
    20.   }
    21. }
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 从零开始写一个Demo - 图1 ## # 2. 将红色方块动态化展示 现在我们把它转换为Fair能够动态处理的bundle。 第一步：添加注解： - @FairPatch() 修饰组件的定义，必须是顶级class - @FairWell() 修饰属性参数，命名需要和注解参数一致 
    1. // 修饰当前页面为一个动态bundle资源
    2. @FairPatch()
    3. class DynamicWidget extends StatelessWidget {
    4.   // 修饰该属性会被build函数使用
    5.   @FairWell('content')
    6.   final String content;
    7.   const DynamicWidget({Key key, this.content}) : super(key: key);
    9.   @override
    10.   Widget build(BuildContext context) {
    11.     return Center(
    12.       child: Container(
    13.         child: Text(
    14.           content,
    15.           style: TextStyle(fontSize: 30, color: Colors.yellow),
    16.         ),
    17.         alignment: Alignment.center,
    18.         margin: EdgeInsets.only(top: 30, bottom: 30),
    19.         color: Colors.redAccent,
    20.         width: 300,
    21.         height: 300,
    22.       ),
    23.     );
    24.   }
    25. }
    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 第二步：现在然我们生成bundle吧

    flutter pub run build_runner build

    编译成功后，在build/fair目录下找到同名bundle资源: - .fair.bin 格式为release产物 - .fair.json 格式为debug产物 - .fair.metadata 格式为元数据，标记了源码与产物的关联信息 bundle 第三步：复制产物并使用 现在我们可以把资源拷贝出来，放到assets下（别忘了先在yaml中配置assets目录/路径） demo-redbox-3 
    1. FairWidget(
    2.   path: 'assets/bundle/lib_page_dynamic_widget.fair.bin',
    3.   data: {'content': 'Red Box'},
    4. )
    1 2 3 4 重新运行app后，可以看到新的效果，前后效果是像素级别一模一样的。
    Flutter源码效果 Fair 动态效果
    demo-redbox-4 demo-redbox-4
    ## # 3. 让红色小块复杂一些 现在我们希望重新编写红色小块，让他做一些调整，然后重新渲染出来（为了方便我们任然采用了内置路径，实际上可以通过url路径）。 具体改动如下： - 把文案改写一下，变成两个名字：张三李四 - 在文字下面加几个图标 - 添加一个网络图片，替换掉红色背景 
    1. @FairPatch()
    2. class DynamicWidget extends StatelessWidget {
    4.   @FairWell('data')
    5.   final Data data;
    7.   const DynamicWidget({Key key, this.data}) : super(key: key);
    9.   @override
    10.   Widget build(BuildContext context) {
    11.     return Center(
    12.       child: Container(
    13.         child: Stack(
    14.           alignment: Alignment.center,
    15.           children: [
    16.             Text.rich(TextSpan(
    17.               text: data.content,
    18.               style: TextStyle(fontSize: 30, color: Colors.yellow),
    19.               children: [
    20.                 TextSpan(
    21.                   text: data.content2,
    22.                   style: TextStyle(fontSize: 30, color: Colors.blue),
    23.                 ),
    24.               ],
    25.             )),
    26.             Positioned.fill(
    27.               child: Icon(Icons.android, color: Colors.white),
    28.               top: 100,
    29.             ),
    30.             Positioned.fill(
    31.               child: Icon(Icons.people, color: Colors.white),
    32.               top: 100,
    33.               left: 100,
    34.             ),
    35.             Positioned.fill(
    36.               child: Icon(Icons.desktop_mac, color: Colors.white),
    37.               top: 100,
    38.               right: 100,
    39.             ),
    40.           ],
    41.         ),
    42.         margin: EdgeInsets.only(top: 30, bottom: 30),
    43.         decoration: BoxDecoration(
    44.             color: Colors.redAccent,
    45.             image: DecorationImage(image: NetworkImage(data.url))),
    46.         width: 300,
    47.         height: 300,
    48.       ),
    49.     );
    50.   }
    51. }
    53. class Data {
    54.   final String content;
    55.   final String content2;
    56.   final String url;
    58.   Data(this.content, this.content2, this.url);
    59. }
    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 编写完代码后，重新生成bundle，app加载新的资源即可。 注意我们的数据原相比一个字段，多了三个，为了方便，这里使用了Bean，当然也可以分散为多个变量： - bean不能嵌套，名字需要于参数对齐 
    1. FairWidget(
    2.   path: 'assets/bundle/lib_page_dynamic_widget2.fair.bin',
    3.   data: {
    4.     'data.content': '张三',
    5.     'data.content2': '李四',
    6.   'data.url':'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2665922796,3139592461&fm=26&gp=0.jpg'
    7.   },
    8. )
    1 2 3 4 5 6 7 8
    第一版效果 Fair 动态效果
    demo-redbox-4 demo-redbox-4
    如果你有服务器，可以把资源托管上去，比如 
    1. FairWidget(
    2.   path:'http://a.b.c/xxx/hello.json',
    3.   name: 'sample_list_view'
    4. )
    1 2 3 4 ← Flutter Fair接入 Counting计数器 →