Skip to content

Commit 166a1a9

Browse files
authored
Merge pull request #1021 from mengyanshou/master
docs(Flutter) : 整体格式优化,添加目录,代码颜色高亮
2 parents 779c2df + 62439c2 commit 166a1a9

File tree

1 file changed

+66
-45
lines changed

1 file changed

+66
-45
lines changed

Flutter/README.md

+66-45
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,83 @@
1+
**目录**
2+
- [DoKit Flutter版](#dokit-flutter版)
3+
- [支持 Flutter 版本](#支持flutter版本)
4+
- [Pub地址](#pub地址)
5+
- [接入](#接入)
6+
- [功能简介](#功能简介)
7+
- [全部组件](#全部组件)
8+
- [日志查看](#日志查看)
9+
- [网络请求](#网络请求)
10+
- [Method Channel信息](#method-channel信息)
11+
- [路由信息](#路由信息)
12+
- [帧率](#帧率)
13+
- [内存](#内存)
14+
- [基本信息](#基本信息)
15+
- [控件检查](#控件检查)
16+
- [颜色拾取](#颜色拾取)
17+
- [Widget层级](#widget层级)
18+
- [页面源码查看](#页面源码查看)
19+
- [页面启动耗时](#页面启动耗时)
20+
- [自定义入口](#自定义入口)
21+
122
# DoKit Flutter版
223

3-
内测版本,目前提供了日志、method channel信息、路由信息、网络抓包、帧率、设备与内存信息查看、控件信息查看、颜色拾取、启动耗时、查看源码、查看widget的build链以及对齐标尺的功能.
24+
内测版本,目前提供了日志、method channel 信息、路由信息、网络抓包、帧率、设备与内存信息查看、控件信息查看、颜色拾取、启动耗时、查看源码、查看 widget 的 build 链以及对齐标尺的功能.
25+
26+
## 支持Flutter版本
427

5-
## 支持flutter版本
6-
version>=1.17.5,其余版本未做过兼容性测试。支持flutter2.0的分支为`0.8.0-nullsafety.0`,后期维护主要会基于该版本进行。
28+
version>=1.17.5,其余版本未做过兼容性测试。支持 flutter2.0 的分支为`0.8.0-nullsafety.0`,后期维护主要会基于该版本进行。
729

830
## Pub地址
31+
932
[DoKit For Flutter](https://pub.dev/packages/dokit)
1033

1134
## 接入
12-
在pubspect.yaml文件的dependencies节点添加pub依赖
35+
1.在 `pubspect.yaml` 文件的 dependencies 节点添加 pub 依赖
1336

14-
```
37+
```yaml
1538
dependencies:
1639
dokit: ^0.8.0-nullsafety.0
1740
```
1841
19-
在main函数入口初始化。 DoKit使用runZone的方式进行日志捕获,方法通道的捕获,如果你的app需要使用同样的方式会有冲突
42+
2.在 main 函数入口初始化。 DoKit 使用 runZone 的方式进行日志捕获,方法通道的捕获,如果你的 app 需要使用同样的方式会有冲突
2043
21-
```
44+
```dart
2245
void main() => {
23-
24-
DoKit.runApp(app:DoKitApp(MyApp()),
25-
// 是否在release包内使用,默认release包会禁用
26-
useInRelease: true,
27-
// 选择性控制是否使用dokit中的runZonedGuarded,false: 禁用;true: 启用
28-
useRunZoned: false,
29-
releaseAction: () => {
30-
// release模式下执行该函数,一些用到runZone之类实现的可以放到这里,该值为空则会直接调用系统的runApp(MyApp()),
31-
})
32-
};
46+
DoKit.runApp(
47+
app: DoKitApp(const MyApp()),
48+
// 是否在release包内使用,默认release包会禁用
49+
useInRelease: true,
50+
// 选择性控制是否使用dokit中的runZonedGuarded,false: 禁用;true: 启用
51+
useRunZoned: false,
52+
releaseAction: () => {
53+
// release模式下执行该函数,一些用到runZone之类实现的可以放到这里,该值为空则会直接调用系统的runApp(MyApp()),
54+
},
55+
);
3356
}
3457

3558
```
3659

37-
**注:谷歌提供的DevTool会折叠非主工程内实例化的widget(根据source file是否属于当前工程),DoKit需要实例化一个wrapper widget用以展示各种overlay,
38-
如果在package内去声明这个wrapper,会导致左边树全部被折叠。故这里要求在main文件内使用DoKitApp(MyApp())的方式来初始化入口**
39-
60+
**注:谷歌提供的 DevTool 会折叠非主工程内实例化的 widget(根据 source file 是否属于当前工程),DoKit 需要实例化一个 wrapper widget 用以展示各种 overlay,
61+
如果在 package 内去声明这个 wrapper,会导致左边树全部被折叠。故这里要求在 main 文件内使用 `DoKitApp(MyApp())` 的方式来初始化入口**
62+
另外提供了一个异步创建入口 Widget的方式,需要异步构建widget的情况。(有些库会在异步构建 Widget 的时候调用 WidgetFlutterBinding.ensureInitialized(),影响 DoKit的 method channel 监控和日志监控,需要延迟到 runZone 内执行)
63+
64+
```dart
65+
void main() {
66+
DoKit.runApp(
67+
appCreator: () async => DoKitApp(
68+
await crateApp(),
69+
),
70+
);
71+
}
4072
41-
另外提供了一个异步创建入口Widget的方式,需要异步构建widget的情况。(有些库会在异步构建Widget的时候调用WidgetFlutterBinding.ensureInitialized(),影响DoKit的method channel监控
42-
和日志监控,需要延迟到runZone内执行)
43-
```
44-
void main() => {
45-
DoKit.runApp(
46-
appCreator: () async =>
47-
DoKitApp(await crateApp())));
48-
};
49-
50-
Widget crateApp() async{
51-
// 一些初始化操作
52-
await ...
53-
return MyApp();
54-
}
73+
Future<Widget> crateApp() async {
74+
// 一些初始化操作
75+
return MyApp();
5576
}
5677
```
5778

5879

59-
### 参数说明
80+
**参数说明**
6081

6182

6283
参数 | 返回类型 | 说明 | 是否必须
@@ -76,38 +97,38 @@ releaseAction | Function | release模式下执行该函数,该值为空则会
7697

7798
<img src="https://pt-starimg.didistatic.com/static/starimg/img/AuETMp2dp11619684586454.png" width="300px" />
7899

79-
当前版本DoKit支持的所有功能全览。常驻工具为显示在底部tab栏的组件,可通过拖动将组件放置或移出常驻工具。
100+
当前版本 DoKit 支持的所有功能全览。常驻工具为显示在底部 tab 栏的组件,可通过拖动将组件放置或移出常驻工具。
80101

81102

82103
### 日志查看
83104

84105
<img src="https://pt-starimg.didistatic.com/static/starimg/img/apwIxs7A341609765573351.jpg" width="300px" />
85106

86107

87-
查看使用print方式打印出来的日志,捕获的异常会以红色显示。超过7行的日志会自动折叠,点击可展开。长按复制日志到剪贴板。
108+
查看使用 print 方式打印出来的日志,捕获的异常会以红色显示。超过7行的日志会自动折叠,点击可展开。长按复制日志到剪贴板。
88109

89110

90111
### 网络请求
91112

92113
<img src="https://pt-starimg.didistatic.com/static/starimg/img/nEN7uos9OV1609765604202.jpg" width="300px" />
93114

94115

95-
可以捕获通过flutter httpclient发出的网络请求,主流的http、dio库底层也是通过httpclient实现的,也能捕获。
116+
可以捕获通过 flutter httpclient 发出的网络请求,主流的 http、dio 库底层也是通过 httpclient 实现的,也能捕获。
96117

97118

98119
### Method Channel信息
99120

100121
<img src="https://pt-starimg.didistatic.com/static/starimg/img/qH6jtyNvqp1609765652146.jpg" width="300px" />
101122

102123

103-
可以展示从dart端到native和从native端到dart端的方法调用、参数、返回结果。
124+
可以展示从 dart 端到 native 和从 native 端到 dart 端的方法调用、参数、返回结果。
104125

105126
### 路由信息
106127

107128
<img src="https://pt-starimg.didistatic.com/static/starimg/img/VLyiReklD41609765682140.jpg" width="300px" />
108129

109130

110-
展示当前页面的路由信息,当存在多层Navigator组件嵌套时,会展示多层的路由信息。
131+
展示当前页面的路由信息,当存在多层 Navigator 组件嵌套时,会展示多层的路由信息。
111132

112133
**注:当前查找栈顶widget是通过遍历整棵widget tree的方式,如果添加了overlay,栈顶widget会始终指向overlay,导致该功能读取数据异常。**
113134

@@ -117,7 +138,7 @@ releaseAction | Function | release模式下执行该函数,该值为空则会
117138
<img src="https://pt-starimg.didistatic.com/static/starimg/img/Xno9FVbweg1609765703740.jpg" width="300px" />
118139

119140

120-
展示最近240帧的耗时情况,每次进入该页面刷新。debug模式下帧率会普遍偏高,profile和release模式下会比较正常
141+
展示最近240帧的耗时情况,每次进入该页面刷新。debug 模式下帧率会普遍偏高,profile 和 release 模式下会比较正常
121142

122143
### 内存
123144

@@ -133,7 +154,7 @@ releaseAction | Function | release模式下执行该函数,该值为空则会
133154
<img src="https://pt-starimg.didistatic.com/static/starimg/img/8brZZzWijZ1609765750681.jpg" width="300px" />
134155

135156

136-
展示当前dart虚拟机进程、cpu、版本信息;当前app包名和dart工程构建版本信息
157+
展示当前 dart 虚拟机进程、cpu、版本信息;当前 app 包名和 dart 工程构建版本信息
137158

138159
**注:该功能通过VMService获取数据,release模式下无法使用。flutter版本号需要flutter attach后才可获取**
139160

@@ -147,13 +168,13 @@ releaseAction | Function | release模式下执行该函数,该值为空则会
147168
### 颜色拾取
148169
<img src="https://pt-starimg.didistatic.com/static/starimg/img/4MYRNqqcZh1619673900891.png" width="300px" />
149170

150-
查看当前页面任何位置对应的像素点的RGBA颜色值,方便UI的调试和获取像素点的颜色
171+
查看当前页面任何位置对应的像素点的 RGBA 颜色值,方便UI的调试和获取像素点的颜色
151172

152173
### Widget层级
153174
<img src="https://pt-starimg.didistatic.com/static/starimg/img/GmjvVDp4Ye1619673908393.png" width="300px" />
154175
<img src="https://pt-starimg.didistatic.com/static/starimg/img/sGd73y7uoc1619673910771.png" width="300px" />
155176

156-
查看当前选中widget的树层级,以及它renderObject的详细build链等信息
177+
查看当前选中 widget 的树层级,以及它 renderObject 的详细 build 链等信息
157178

158179
### 页面源码查看
159180
<img src="https://pt-starimg.didistatic.com/static/starimg/img/e7Pbo95nJ71619665430550.jpg" width="300px" />
@@ -167,7 +188,7 @@ releaseAction | Function | release模式下执行该函数,该值为空则会
167188
<img src="https://pt-starimg.didistatic.com/static/starimg/img/z1wWlYqZDg1619674872051.png" width="300px" />
168189

169190
获取页面的启动耗时,
170-
框架已做无侵入的注入NavigatorObserver。但是在较复杂的App构建时可能失效,需要手动添加`DokitNavigatorObserver`
191+
框架已做无侵入的注入 NavigatorObserver。但是在较复杂的 App 构建时可能失效,需要手动添加`DokitNavigatorObserver`
171192

172193
**注:页面启动耗时信息只有在profile或release模式下才有意义**
173194

0 commit comments

Comments
 (0)