分类 iOS 下的文章

前言

开个新坑,最近看SegmentFault了解到Google新推出了一个UI框架————Flutter。还是算比较新的一个框架就当随便玩玩(不保证会弃坑!第一篇主要看一下这个框架语法结构之类的东西。环境搭建就不说了可以去看看官方文档或者百度也有比较多教程。


项目自带实例代码结构

由于Flutter是一个跨平台的UI框架,这里用Android studio做学习
捕获.PNG

新建项目后会自动生成一个main.dart的文件里面有一个官方的实例代码(注:需要注意的是Flutter是使用Dart语言编写的,Dart也是一门面向对象的编程语言,上手难度不算很高)

  • import 'package:flutter/material.dart';
    这是导入了google的material design库,导入之后就可以使用相关风格的图标,文本之类的内容。相当于导入了一个控件库
  • void main() => runApp(new MyApp());
    这个就相当于java里面的main方法,程序的入口方法。也可以写成以下形式
void main(){
  return runApp(Widget app);}
  • StatelessWidget和StatefulWidget
    Flutter两个最基本的控件类,一个叫无状态类,另一个叫有状态类。区别也就字面意思:有无状态。无状态就是譬如文本、图片,我们只需要改动控件本身的配置信息就可以了;有状态就是譬如滚动列表、动画之类的可以动态改变的控件

程序员通用技能 HelloWorld

先贴代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
  // TODO: implement build
  return new MaterialApp(             //代表使用Material Design风格的应用
    title: 'Hello World',             //多任务切换时显示的标题
    home: new Scaffold(               //脚手架 相当于一个页面的父布局
      appBar: new AppBar(             //相当于Android的toolbar
        title: new Text('Hello World'),
      ),
      body: new Center(               //除toolbar的页面部分
        child: new Text('Hello World'),
      ),
   ),
 );
} }
  • 首先编写一个无状态的控件里面需要重写一个build方法,这个方法需要返回一个Widget对象。这里返回一个MaterialApp的对象。代表这个应用使用的是Material Design风格。然后这一层有两个属性title和home。 title:代表的是应用在多任务切换时显示的标题(然而暂时并不知道有什么用~);home:表示整个页面布局
  • 然后在home这一层新建了一个Scaffold对象,这个对象相当是整个页面的父布局就类似Android中xml文件中最外层的那个布局。
  • Scaffold里面有一个appBar和一个body组成,类似Android中一个toolbar+其他显示页面的结构
  • AppBar对象里有一个title就是页面的标题位置,new Text就是新建一个文本对象来显示HelloWorld
  • body里面新建了一个Center对象,意思是居中显示的意思,里面有一个child的属性,这个属性也可以新建一个文本对象来显示文本

最后效果:

screenshot-1525357659528.jpg


初步感觉

初步使用这个框架的话,由于之前android写得比较多,简单的Dart代码也是很好上手的。但是这个框架运行的时间实在久得可怕,幸好热加载功能比较方便。
以下是一个介绍Flutter基础的教程,感兴趣可以看看:请输入链接描述