flutter渲染原理要点

  • 渲染过程会生成三棵树

    • widget树

    • element树

    • render object树

  • 提高buid效率,在build方法中尽量少做事,层级越简单越好
  • setState方法尽量下放到底层节点
  • 尽量减少重绘区域,使用repaint boundry
  • 减少离屏渲染 比如save layer,clip path,
  • 减少透明度使用,因为每一帧都会重建widget
  • 建立缓存池
  • 提升layout效率

参考:https://www.freesion.com/article/8834628331/

dart枚举

1
2
3
4
5
6
7
8
9
enum MediaType {
movie, //0
shortVideo, //1
other, //2
}

var videoType = MediaType.values[0];
// videoType == movie

定义枚举和OC差别不大,取值的时候不可以直接和int比较,需要从枚举数组中根据index拿出来,比OC多了一步

什么是bitCode

The process of compiling consists of three different steps:

1.The compilier front-end converts the source code into some kind of intermediate representation.

2.The optimizer performs a sequence of optimizing transformations on the IR to render it smaller and more performant:redundant code is removed,results are pretaculated,code is inlined, etc.This crucial step of the compilation process makes use of IR,rather than cource code or machine code,because it can more easily be interreted by the optimizer.

  1. The compilier back-end generates machine code based on the optimized IR.

When we are talking about bitcode,we are actually talking about the IR used by the Clang Compilier.

image

With the bitcode embedded in the executable,Apple is able to recompile applications without interacting with the developer.This has a lot of advantages.

source:https://www.guardsquare.com/en/blog/enable-bitcode

flutter组件

sliverList

A sliver that places multiple box children in a linear array along the main axis.

Each child is forced to have the SliverConstraints.crossAxisExtent in the cross axis but determines its own main axis extent.

SliverList determines its scroll offset by “dead reckoning“ because children outside the visible part of the sliver are not materialized, which means SliverList cannot learn their main axis extent.Instead,newly materialized children are placed adjacent to existing children.

flutter actionSheet使用方法

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
//函数
_showCupertinoActionSheet() async{
var result = await showCupertinoModalPopup(
context: context,
builder: (context) {
return CupertinoActionSheet(

title: Text('标题'),
message: Text('内容'),
actions: <Widget>[
CupertinoActionSheetAction(
child: Text(
'标题一',
style: TextStyle(
color: Color(0xFF00C599)
),
),
onPressed: () {
Navigator.of(context).pop('delete');
},
isDefaultAction: true,
),

CupertinoActionSheetAction(
child: Text('标题二'),
onPressed: () {
Navigator.of(context).pop('not delete');
},
isDestructiveAction: true,
),
],
cancelButton: CupertinoActionSheetAction(
child: Text(
'取消',
style: TextStyle(
color: Colors.white
),
),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
);
});
print('$result');
}

总结:在showCupertinoModalPopup方法里返回CupertinoActionSheet,里面的元素由CupertinoActionSheetAction组成,有default和destructive类型可选,用法和UI和苹果大致一样

image

pubspec.lock坑

昨天以为pubspec.lock文件和cocoapods的profile.lock文件性质一样,可以生成,所以删除,结果遇见了编译报错,即使在执行了

1
flutter pub get

命令重新生成后,经过一番研究和队友协助,找到是这个问题,把老的恢复回来工程编译正常,下面是报错的关键字

1
Execution failed for task ':app:processDebugManifest'. > Manifest merger failed : Attribute provider...

做记录方便以后查阅。

flutter启动页

在main.dart文件的materialAPP.home属性返回一个UI,这个UI就是启动页,启动页的scanffold的body,返回一张图片

  • in main.dart
1
2
3
return MaterialApp(
home: SplashPage(),
);
  • in SplashPage

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    body: Container(
    child: Image.asset(
    'assets/images/launch_image.png',
    fit: BoxFit.fill,
    width: double.infinity,
    height: double.infinity,
    ),
    ),
    );
    }