Flutter仿美团应用开发笔记-入门篇
Flutter概览
Flutter是谷歌发布的跨平台开发框架(通过极少的改动即可运行在桌面端,web端,Android与IOS且UI具有高度一致性)并将作为谷歌新操作系统Fuchsia的UI框架。在移动端Flutter通过skia2D绘图引擎保证了各平台UI一致性的同时具有媲美原生应用的流畅度。因Dart语言同时支持JIT编译(Just in Time)和AOT编译(Ahead of Time)使得Flutter支持hot reload。在开发阶段可以帮助您在无需重新启动应用的情况下快速、轻松地进行测试、构建用户界面、添加功能以及修复错误。而在发布时又能获得极高的性能表现。想要了解更多Flutter相关内容请前往Flutter官网(需翻墙):flutter.dev/ 中文镜像站 : flutter-io.cn/
环境配置
Flutter安装建议参考中文镜像站里的安装教程,包含了配置国内镜像的内容。系统可以是Windows,Linus,macOS。集成开发环境可以选择Android Studio,IDEA, VS Code。
在安装完Flutter插件后新建项目时便会有Flutter项目的选项。 Flutter基础项目如上图所示,android和ios文件夹为对应平台的配置文件和基础架构,lib目录存放编写的dart的文件,pubspec.yaml用来添加依赖库和图片等资源文件。lib目录下自动生成的main.dart文件包含了Flutter应用的入口,通过对该文件的解析可以大致了解Flutter应用结构。
dart语言概览
Flutter框架唯一支持的编程语言为dart。dart语言可以简单的看作Java和JavaScript的结合体,有过面向对象编程语言的小伙伴们都能快速上手。详细的教程参考 官方文档 这里只介绍一些与其他编程语言的相差较大的部分:
- MyHomePage(title: 'Flutter Demo Home Page') 在定义方法时用大括号包裹住的参数为带名称的可选参数,参数前用 @required 注释表明该参数不可省。如:MyHomePage({Key key, this.title}) , this.title表示将传入的值直接赋给属性title。
- 在dart中,new关键字永远是可省的,如 return MaterialApp(...)。 变量定义可以是
String str; final str = "" const str = "" var str = "" dynamic str = "" 复制代码
final和const的区别在于final是只能被赋值一次的常量,可以用另一个变量初始化,而const不能被变量初始化,const的值必须在编译前就能被确定。
- 传递方法
() => _counter++; //方法体为单行, 约定下划线开头的属性为私有 (p1, ...) => ... ; () {} //方法体为多行 (p1, ...) { ... } 复制代码
main.dart文件解析
import 'package:flutter/material.dart';void main() => runApp(MyApp()); //dart中的入口函数,runApp方法启动Flutter应用程序class MyApp extends StatelessWidget { //在Flutter中一切皆为控件,无论Activity还是布局等。@overrideWidget build(BuildContext context) {return MaterialApp( //便捷创建app的控件,可以配置全局颜色主题,路由,国际化等。title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}
//最常用的两大Widget之一。StatefulWidget,可以通过setState方法动态的改变界面
class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() { //通过改变State中的属性动态的改变界面_counter++;});}@overrideWidget build(BuildContext context) {//Scaffold控件提供了一个路由的基础结构,如appBar,body等。return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center( //使子控件居中child: Column( //使children中的多个控件垂直排列mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton( //悬浮按钮onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), );}
}
复制代码
转载于:https://juejin.im/post/5ceb97116fb9a07eab685edb
Flutter仿美团应用开发笔记-入门篇相关推荐
- Flutter仿美团应用开发笔记-首页 (1)
首页篇 Github项目地址:项目地址 上一篇博客讲解了该应用的基础结构,如底部导航栏等.基础结构篇 这篇博客将详细讲解美团首页的界面实现,在下一篇博客实现推荐卡片无限加载,带插入和移除动画的列表,弹 ...
- android大疆飞控界面,DJI Android SDK 开发笔记(入门篇)
##大疆SDK开发笔记## #1.文档相关 2.Android SDK文档 接入Android的SDK都在这部分,飞控相关的接口. 3.Android UX SDK文档 大疆自定义的组件,已经跟飞机关 ...
- 仿美团网开发笔记(持更)
问题待查: 1. vue数据驱动(数据双向绑定) 2. 所遇难点:
- Google Map 开发笔记——基础篇(Javascript )
Google Map 开发笔记--基础篇 说明: 一.使用入门: 1.在您需要显示地图的 html 页面嵌入这段 script 2.地图 DOM 元素 3.初始化地图 二.地图画点.线.面 1.标记( ...
- C# 学习笔记入门篇(上)
文章目录 C# 学习笔记入门篇 〇.写在前面 Hello World! 这篇学习笔记适合什么人 这篇学习笔记到底想记什么 附加说明 一.命名空间 "进入"命名空间 嵌套的命名空间. ...
- R语言学习笔记——入门篇:第一章-R语言介绍
R语言 R语言学习笔记--入门篇:第一章-R语言介绍 文章目录 R语言 一.R语言简介 1.1.R语言的应用方向 1.2.R语言的特点 二.R软件的安装 2.1.Windows/Mac 2.2.Lin ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- 《Managed DirectX +C# 开发(入门篇)》系列文章
写在最前: 1.本系列文章版权归tongabcd所有,转载自dandanCool(并非原创作者),此处只作收藏与分享之用. 2.此系列文章如有再转,需按如下方式于文章醒目位置显示标明原创作者极其联系方 ...
- 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码(小程序云)
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
最新文章
- python top n排序
- MessagePack Java Jackson Dataformat 在 Map 中不使用 String 为 Key 的序列化
- python 替换字符串
- 在JS中使用trim 方法
- 陕西省2021年高考成绩位次查询,2021年陕西高考个人排名怎么查询,陕西高考成绩排名查询方法...
- Linux:Linux常用网络指令
- CORE网络数据包接收传递过程分析
- java编程手册_java编程手册下载
- XMLSpy的主要功能介绍
- 最新 Eclipse 版 JRebel 激活
- Python的index函数用法
- OSError: inotify watch limit reached
- mac 电脑如何从双系统恢复原mac系统,无需u盘一键重新安装macos
- WCF实现双工通讯及客户端调用
- 新《古惑仔》 —— 神转折大赛
- Hive创建表的几种方式
- 1月份国产手机出货量大幅下滑,iPhone却逆势增100万
- 新手小白怎样玩转短视频抖音吸粉公众号小说项目
- KSO-vue创建项目以及安装npm与node
- Unity3d开发之十二:邮箱正则验证js和c#
热门文章
- Ubuntu系统上为用户授予和删除sudo权限的方法
- 因系统因配置问题报错,如何调整(两类 【与外界其他环境相关联】 【★自身配置★】(★关注web.xml★))
- 记录下帮助一位网友解决的关于android子控件的onTouch或onClick和父OnTouch 冲突的问题。
- 解决WORD文档无法显示链接的图像问题
- 怎么解决VMware“该虚拟机似乎正在使用中”问题
- display: flex; 的兼容问题解决办法
- springboot系列六、springboot配置错误页面及全局异常
- java并发之如何解决线程安全问题
- git remote prune,git prune,git fetch --prune等有什么区别
- 对服务与工厂感到困惑