-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
478 lines (373 loc) · 17.8 KB
/
index.html
File metadata and controls
478 lines (373 loc) · 17.8 KB
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flutter - 极速构建漂亮的本地应用 </title>
<link rel="shortcut icon" href="/images/favicon.png">
<meta name="description" content="">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="/css/lavish-bootstrap.css">
<link rel="stylesheet" href="/css/main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro%7CRoboto:500,400italic,300,400" rel="stylesheet">
<link rel="canonical" href="http://localhost:4000/">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67589403-1', 'auto');
ga('send', 'pageview');
</script>
<meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4" />
</head>
<body class="homepage">
<div id="overlay-under-drawer"><!-- for the drawer on narrow screens --></div>
<header class="site-header">
<div class="container-fluid header-contents">
<div class="row">
<div class="col-md-12">
<i class="fa fa-bars" id="sidebar-toggle-button" aria-hidden="true" style="display:none"></i>
<img src="/images/flutter-mark-square-100.png" alt="Flutter Logo" width="40" height="40" style="vertical-align:middle">
<a class="site-title" href="/">Flutter</a>
<nav class="site-nav">
<a href="#" class="menu-icon">
<i class="material-icons-extended">more_vert</i>
</a>
<div class="trigger">
<a class="page-link" href="/docs/">文档</a>
<a class="page-link" href="/showcase/">案例</a>
<a class="page-link" href="https://github.com/flutter/flutter">GitHub</a>
<a class="page-link" href="https://pub.dartlang.org/flutter">库</a>
<a class="page-link" href="/support/">支持</a>
<a class="page-link" href="http://flutter-dev.cn">中文开发者论坛</a>
<form action="/search/" class="nav-searchbox" id="cse-search-box" style="display: inline">
<input type="hidden" name="cx" value="007067728241810524621:gm6vraqlc8c">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="hl" value="en">
<input type="search" name="q" id="q" autocomplete="off" placeholder="搜索">
</form>
</div>
</nav>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
</header>
<!-- Page Content -->
<div class="container-fluid contents">
<!-- Content Row -->
<div class="row">
<!-- Sidebar Column -->
<div id="side-nav-container" class="col-sm-3">
<ul id="mysidebar" class="nav">
<li class="sidebar-title">入门</li>
<ul class="sidebar-items">
<li><a href="/get-started/install/">1: 安装</a></li>
<li><a href="/get-started/editor/">2: 配置编辑器</a></li>
<li><a href="/get-started/test-drive/">3: Flutter 初体验</a></li>
<li><a href="/get-started/codelab/">4: 编写第一个 Flutter 应用</a></li>
<li><a href="/get-started/learn-more/">5: 学习更多</a></li>
</ul>
<li class="sidebar-title">构建 UI</li>
<ul class="sidebar-items">
<li><a href="/widgets-intro/">框架预览</a></li>
<li><a href="/widgets/">Widget 目录</a></li>
<li><a href="/cookbook/">小案例</a></li>
<li><a href="/catalog/samples/">示例目录</a></li>
<li><a href="/codelabs">Codelab</a></li>
<li><a href="/tutorials/layout/">构建布局 - 教程</a></li>
<li><a href="/tutorials/interactive/">添加交互 - 教程</a></li>
<li><a href="/web-analogs/"> Web 开发者参考</a></li>
<li><a href="/flutter-for-android/">Android 开发者参考</a></li>
<li><a href="/flutter-for-ios/">iOS 开发者参考</a></li>
<li><a href="/flutter-for-react-native/">React Native 开发者参考</a></li>
<li><a href="/gestures/">手势</a></li>
<li><a href="/animations/">动画</a></li>
<li><a href="/layout/">框约束</a></li>
<li><a href="/assets-and-images/">资源与图像</a></li>
<li><a href="/tutorials/internationalization">国际化</a></li>
<li><a href="/accessibility">无障碍</a></li>
</ul>
<li class="sidebar-title">使用设备与 SDK 中的 API</li>
<ul class="sidebar-items">
<li><a href="/using-packages/">使用扩展包</a></li>
<li><a href="/developing-packages/">开发扩展包</a></li>
<li><a href="/platform-channels/">平台特定代码</a></li>
<li><a href="/json/">JSON 和序列化</a></li>
</ul>
<li class="sidebar-title">开发与工具</li>
<ul class="sidebar-items">
<li><a href="/using-ide/">Flutter IDE 的使用</a></li>
<li><a href="/hot-reload/">热重载的使用</a></li>
<li><a href="/testing/">应用测试</a></li>
<li><a href="/debugging/">应用调试</a></li>
<li><a href="/ui-performance/">性能分析</a></li>
<li><a href="/inspector/">用户界面检查</a></li>
<li><a href="/android-release/">编译正式版的 Android 应用</a></li>
<li><a href="/ios-release/">编译正式版的 iOS 应用</a></li>
<li><a href="/fastlane-cd/">使用 Fastlane 持续部署</a></li>
<li><a href="/upgrading/">升级 Flutter</a></li>
<li><a href="/formatting/"> 格式化代码</a></li>
</ul>
<li class="sidebar-title">更多细节</li>
<ul class="sidebar-items">
<li><a href="/faq/">FAQ</a></li>
<li><a href="/technical-overview">技术一览</a></li>
<li><a href="https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit?usp=sharing">神奇的 Flutter - 幻灯片</a></li>
<li><a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing">架构图</a></li>
<li><a href="https://www.bilibili.com/video/av14430321/">Flutter 框架层设计 <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
<li><a href="https://www.bilibili.com/video/av6269773/">Flutter 的渲染管线 <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
</ul>
</ul>
</div>
<!-- Homepage Content Column -->
<div class="col-sm-12 main-contents">
<div class="main-contents-body">
<article class="post-content">
<div class="homepage__illustration">
<h1 class="homepage__illustration--text">
<span>最新版本：</span>
<a href="https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a?linkId=53249457">Flutter Release Preview 1</a>.
</h1>
<h1 class="homepage__illustration--text">
<span>翻译此网站：</span>
<a href="https://github.com/flutter-dev/website/tree/master/zh_CN">了解更多</a>.
</h1>
<img src="images/homepage/header-illustration.png" class="homepage__illustration--image" alt="Illustration with a mobile phone, a pencil, and an abstract drawing of widgets." />
</div>
<section class="homepage__key_points card">
<h1 class="homepage__title">
以极短的时间构建优雅的原生级应用
</h1>
<div class="homepage__tagline">
Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.
</div>
<div class="homepage__button_row">
<a href="/get-started/install/" class="get-started-button">开始</a>
</div>
<div class="key-points">
<div class="homepage__key_point">
<div class="homepage__key_point_title">快速开发</div>
<p>
程序的热重载可以在瞬间完成，让应用在生命周期内得到重绘。丰富且完全可定制的部件可以让你在几分钟内构建原生级界面。
</p>
</div>
<div class="homepage__key_point">
<div class="homepage__key_point_title">极具表现力和灵活性的 UI</div>
<p>
Flutter 能够快速发布专注于终端用户体验的功能。其分层架构允许完全自定义，从而实现快速渲染和极具表现力与灵活性的设计。
</p>
</div>
<div class="homepage__key_point">
<div class="homepage__key_point_title">本地化表现</div>
<p>
Flutter 的部件包含所有重要的平台差异，如滚动，导航，图标和字体，以在 iOS 和 Android 上提供完整的 UI 本地化表现。
</p>
</div>
</div>
</section>
<section class="homepage__hot_reload card">
<h1>快速开发</h1>
<p>
Flutter 的热重载 可帮助您快速轻松地试验，构建 UI，添加功能和快速地修复错误。在 iOS 和 Android 的模拟器与硬件上体验亚秒级重载的同时不会丢失状态。
</p>
<div class="hot-reload-gif-container">
<img src="/images/intellij/hot-reload.gif" class="hot-reload-gif" alt="Make a change in your code, and your app is changed instantly." />
</div>
</section>
<section class="homepage__beautiful_uis card ">
<h1>极具表现力和美观 UI</h1>
<p>
使用 Flutter 内置的 Material Design 和 Cupertino（iOS 风格）的部件、丰富的手势 API、自然平滑的滑动和不同的平台表现来提升用户体验。
</p>
<div class="screenshot-list">
<img class="screenshot" src="/images/homepage/screenshot-1.png" width="270" height="480" alt="Brand-first shopping design" />
<img class="screenshot" src="/images/homepage/screenshot-2.png" width="270" height="480" alt="Fitness app design" />
<img class="screenshot" src="/images/homepage/screenshot-3.png" width="270" height="480" alt="Contact app design" />
<img class="screenshot" src="/images/homepage/ios-friendlychat.png" width="270" height="480" alt="iOS chat app design" />
</div>
<p>
浏览 <a href="/widgets/">部件目录</a>.
</p>
</section>
<section class="homepage__reactive_framework card">
<h1>现代化响应式框架</h1>
<p>
使用Flutter的现代化响应式框架和丰富的平台、布局和基础组件来构建你的用户界面。使用功能强大且灵活的API（针对 2D，动画，手势，动效等）解决复杂的用户界面设计。
</p>
<pre class="prettyprint highlighter-rouge highlight lang-dart language-dart"><code>class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// Tells the Flutter framework that state has changed,
// so the framework can run build() and update the display.
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// This method is rerun every time setState is called.
// The Flutter framework has been optimized to make rerunning
// build methods fast, so that you can just rebuild anything that
// needs updating rather than having to individually change
// instances of widgets.
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}</code></pre>
<p>
浏览 <a href="/widgets/">组件目录</a>
来学习
<a href="/widgets-intro/">响应式框架。</a>.
</p>
</section>
<section class="homepage__interop card">
<h1>使用平台原生功能及 SDK</h1>
<p>
通过平台 API，第三方 SDK 和原生代码让你的应用具有强大的扩展性。 Flutter 允许重复使用现有的 Java，Swift 和 ObjC代码，并访问 iOS 和 Android 上的原生功能和 SDK。
</p>
<p>
访问平台的原生功能非常简单。 如以下是来自 <a href="https://github.com/flutter/flutter/tree/master/examples/platform_channel">平台交互 demo</a> 的代码片段：
</p>
<pre class="prettyprint highlighter-rouge highlight lang-dart language-dart"><code>Future<Null> getBatteryLevel() async {
var batteryLevel = 'unknown';
try {
int result = await methodChannel.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level: $result%';
} on PlatformException {
batteryLevel = 'Failed to get battery level.';
}
setState(() {
_batteryLevel = batteryLevel;
});
}</code></pre>
<p>
学习如何使用 <a href="/using-packages/">扩展库</a>, 或者编写
<a href="/platform-channels/">平台通道</a>,
来访问原生代码、API 和 SDK。
</p>
</section>
<section class="homepage__features card">
<h1>统一应用开发</h1>
<p>
Flutter 的工具和库可以帮助你轻松地将自己的想法带到 iOS 和 Android 设备上。如果你没有任何移动开发经验，用 Flutter 来构建漂亮的移动应用是你不错的选择。如果你是一位经验丰富的 iOS 或 Android 开发人员，则可以使用 Flutter 作为你应用的用户界面开发工具，并充分利用现有的大部分Java、ObjC 或 Swift 代码。
</p>
<div class="feature-lists">
<div class="feature-list-group">
<h3>应用构建</h3>
<h4>漂亮的用户界面</h4>
<ul>
<li>丰富的2D 硬件加速API</li>
<li>响应式框架</li>
<li>动画和运动 API</li>
<li>Material 风格和 Cupertino 风格的部件</li>
</ul>
<h4>流畅的编程体验</h4>
<ul>
<li>亚秒级、保留状态的热重载</li>
<li>IntelliJ 的 refactor、代码补齐等功能</li>
<li>Dart 语言及其核心库</li>
<li>依赖库管理</li>
</ul>
<h4>构建功能齐全的应用</h4>
<ul>
<li>调用平台的 API 和 SDK</li>
<li>Maven/Java</li>
<li>Cocoapods/ObjC/Swift</li>
</ul>
</div>
<div class="feature-list-group">
<h3>应用优化</h3>
<h4>测试</h4>
<ul>
<li>单元测试</li>
<li>集成测试</li>
<li>设备端实时测试</li>
</ul>
<h4>调试</h4>
<ul>
<li>IDE 调试器</li>
<li>基于 Web 的调试器</li>
<li>async/await 的可感知</li>
<li>实时表达式值显示</li>
</ul>
<h4>分析</h4>
<ul>
<li>时间线</li>
<li>CPU 和 内存</li>
<li>应用内视图</li>
</ul>
</div>
<div class="feature-list-group">
<h3>部署</h3>
<h4>编译</h4>
<ul>
<li>本地 ARM 机器码</li>
<li>消除冗余代码</li>
</ul>
<h4>分发</h4>
<ul>
<li>App Store</li>
<li>Play Store</li>
</ul>
</div>
</div>
<p>
通过学习 <a href="/technical-overview/">技术概览</a> 来了解 Flutter 为什么如此特殊。
</p>
</section>
<section class="homepage__try_flutter card">
<div class="homepage__try_today">现在就来体验 Flutter，轻松入门。</div>
<div class="homepage__button_row">
<a href="/get-started/install/" class="get-started-button">开始</a>
</div>
</section>
</article>
</div>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
<footer class="site-footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="logo">
<img src="/images/flutter-mark-square-100.png" alt="Flutter Logo" width="100" height="100">
</div>
<p class="site-footer__link-list">
<a href="https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</a> •
<a href="https://twitter.com/flutterio">twitter</a> •
<a href="https://github.com/flutter/">github</a> •
<a href="/tos">terms</a> •
<a href="https://www.google.com/intl/en/policies/privacy/">privacy</a> •
<a href="https://github.com/orgs/flutter-dev/teams/flutter/">翻译组</a>
</p>
<p class="licenses">
除非另有说明，否则本作品根据
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可证</a>进行许可，代码示例已根据 BSD 许可证进行许可。
</p>
</div>
</div>
</div>
</footer>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="/js/sidebar_toggle.js"></script>
<script src="/js/customscripts.js"></script>
<script src="/js/prism.js"></script>
<script src="/js/tabs.js"></script>
<script src="/js/archive.js"></script>
<script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script>
</body>
</html>