Flutter入坑开篇-Hello World

2019年7月4日 192次阅读 来源: 蒙娜lisa

Flutter官方传送门：Flutter – Beautiful native apps in record time

创建一个空的工程之后,工程结构如下：

《Flutter入坑开篇-Hello World》
《Flutter入坑开篇-Hello World》

我们只关心lib下面的xxx.dart文件，我们新建的界面都是在这个lib下面进行代码编写都是.dart文件，我们不需要关心android和ios那个目录下面的文件了,都只是一个MainActivity。

刚刚入坑，先记录下

还有就刚刚入坑了解到所有都是小部件widget,我们先来看一下helloworld

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

下面来给大家解释下里面的代码：

import就是导入包，flutter必须导入这个包

‘flutter/material.dart’

第二行vod main()=>runApp(new MyApp());

（=>）表示单行函数或方法的简写,等同于：

void main() {
  return runApp(Widget app);
}

runApp启动一个flutter应用，runApp方法的注释第一行就是：

Inflate the given widget and attach it to the screen.
填充给定的小部件添加到屏幕上

定义一个MyApp的widget继承StatelessWidget，抽象类StatelessWidget它是一个无状态控件，它可以定义一个不需要可变状态的控件，我们可以称其为“无状态控件”，它通过构建一系列其他控件来描述用户界面的一部分，构建过程以递归方式执行，直到用户界面的描述完全具体化。

重写build方法，方法中的抽象类BuildContext是该控件在控件树中的位置句柄。

BuildContext 就是Element的一个接口类。

MaterialApp说明的一个入口：Flutter 控件之 MaterialApp

Scaffold说明的一个入口：Flutter 控件之 Scaffold

大概了解下相关属性描述，多敲代码，不要只看代码。

旨在帮助正在准备入坑Flutter的童鞋,上手Flutter开发一个app。

    原文作者：蒙娜lisa
    原文地址: https://zhuanlan.zhihu.com/p/37834266
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞