拜师入门仪式

android studio 相关说明 | 2018-08-05 10:45

精彩内容点击上方关注南京Android部落系列:《Flutter从入门到放弃》开发环境:Mac os + Android Studio本文将花费您5分钟左右的时间,一口气看完效果更佳哦

鲍勃是一家互联网公司的移动开发工程师,一直想学习一门新的技术。可是现在每天面对各种新技术,一时间鲍勃也不清楚学个什么新技术比较好。人工智能、机器学习、区块链各种高大上的概念在朋友圈刷的铺天盖地,但是这些技术离现在正在做的工作相差的还是挺大的。偶然间,在一个技术交流群里看到一个叫弗拉德的教授在推广Flutter,说这玩意是跨平台的,并且拥有原生页面一样的交互体验,巴拉~巴拉~弗拉德在群里一顿胡吹。鲍勃按奈不住诱惑,就上网仔细查了下Flutter并跑了个小Demo体验了一下。

几日后下午,偶然和弗拉德在街角的咖啡店相遇:

鲍勃:“哎呦~弗老师~Flutter可以啊!” (鲍勃欣喜的叫道)弗拉德:“小鲍啊,体验过了感受如何啊?” (弗拉德淡定的回道)鲍勃:“我体验了下那个开源项目gitme,真的蛮不错的,我也想学,能不能指导指导我啊?”弗拉德:“嗯!~老夫看在你天资还不错,就免费教授与你吧”鲍勃:“多谢弗教授[手动抱拳]”这就算拜师成功啦!弗拉德:”来吧,hello world 走起吧!“鲍勃:“弗老师啊,前几天我已经建了一个空的工程了,但是就是不知道从哪开始下手”弗拉德:“不错嘛,环境搭的挺快嘛!好吧,打开你的项目”鲍勃:“已经打开了” (鲍勃已经迫不及待了)弗拉德:“找到lib-main.dart文件并打开”

鲍勃:“打开了,然后呢”弗拉德:“年轻人,别这么猴急嘛。接下来把下面这段代码替换进去”

1import 'package:flutter/material.dart'; 2 3void main() { 4  runApp( 5    new Center( 6      child: new Text( 7        'Hello, world!', 8        textDirection: TextDirection.ltr, 9      ),10    ),11  );12}鲍勃:“弗老师啊,替换是替换了,可是代码看不懂啊”弗拉德:“别急嘛,听我跟你慢慢讲来”“第一行呢,是引入material风格的widgets”"第三行呢,就是我们熟悉的main函数了"“第四行runApp方法接受一个widget,用来作为根widget的,与我们开发原生Android应用时用的setContentView有点像”“第五行呢,实例化了一个Center的widget作为参数传给runApp方法,center控件的作用是让其子控件都居中显示。首先我们要有一个概念,在Flutter中几乎所有东西都可以称为一个widget(可以理解为一个控件)。现在你暂时有个印象就可以了,不用深究,以后呢我们会详细的讲这块”

鲍勃:“哦。。”(鲍勃眉头紧锁,似懂非懂)弗拉德:“同理啊,第六行是实例化了一个Text控件放入Center控件中,组合起来的意思就是text显示的内容在Center控件的中间

鲍勃:“哦!我明白了,因为Center控件是整个APP的根控件,代表整个屏幕,所以text在center控件的中间显示也就应该显示在整个屏幕的正中间”

弗拉德:“小子还是有点悟性的嘛,理解的不错。今天我先讲到这,你有个基础的概念就行。后面呢,我会通过相对更复杂的UI来让你对widget有更进一步的理解”

鲍勃:“多谢弗老师的指点,我请您喝杯咖啡”

runApp函数接受指定的控件(Widget),并使其作为控件树(widget tree)的根控件。控件(Widget)定义一个元素(Element)的配置,在Flutter框架的层次结构中处于核心层。本实例中,控件树(widget tree)包含两个控件,Center控件使其子控件处于中间位置,Text控件打印文本内容。runApp函数强制将根控件覆盖屏幕,这意味着文本“hello,world”将显示在屏幕中心。

对了,可通过下方赞助一杯咖啡哦: