Flutter 应用入门:计数器
用Android Studio创建的Flutter应用模板默认是一个简单的计数器示例。
// 导入包
import 'package:flutter/material.dart';
// 应用入口,启动Flutter应用,runApp它接受一个Widget参数
void main() => runApp(MyApp());
// MyApp类代表Flutter应用,它继承了 StatelessWidget类,这也就意味着应用本身也是一个widget
class MyApp extends StatelessWidget {
// widget的主要工作是提供一个build()方法来描述如何构建UI界面(通常是通过组合、拼装其它基础widget)
@override
Widget build(BuildContext context) {
// MaterialApp是Material库中提供的Flutter APP框架,通过它可以设置应用的名称、主题、语言、首页以及路由列表等,它本身也是一个widget
return MaterialApp(
// 应用名称
title: 'Flutter Demo',
// 应用主题
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 应用首页路由,本身也是一个widget
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// Flutter应用的首页
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
// 有状态的组件(Stateful widget) 和无状态的组件(Stateless widget)有两点不同:
// 1. Stateful widget可以拥有状态,这些状态在widget生命周期中是可以变的,而Stateless widget是不可变的。
// 2. Stateful widget至少由两个类组成:
// 一个StatefulWidget类;
// 一个State类,StatefulWidget类本身是不变的,但是State类中持有的状态在widget生命周期中可能会发生变化。
class _MyHomePageState extends State<MyHomePage> {
// 组件的状态,记录按钮点击的总次数
int _counter = 0;
// 设置状态的自增函数
/* 当按钮点击时,会调用此函数,该函数的作用是先自增_counter,然后调用setState 方法。
setState方法的作用是通知Flutter框架,有状态发生了改变,Flutter框架收到通知后,会执行build方法来根据新的状态重新构建界面,
Flutter 对此方法做了优化,使重新执行变的很快,所以你可以重新构建任何需要更新的东西,而无需分别去修改各个widget。
*/
void _incrementCounter() {
setState(() {
_counter++;
});
}
//
@override
Widget build(BuildContext context) {
// Scaffold是Material库中提供的页面脚手架,它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Center组件,可以将其子组件树对齐到屏幕中心
body: Center(
// Column组件,可以将其所有子组件沿屏幕垂直方向依次排列
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
// 页面右下角的带“+”的悬浮按钮,它的onPressed属性接受一个回调函数,代表它被点击后的处理器
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
为什么要将build方法放在State中,而不是放在StatefulWidget中?
主要是为了提高开发的灵活性。
如果将build()方法放在StatefulWidget中则会有两个问题:
- 状态访问不便;
- 继承StatefulWidget不便;
Flutter 应用入门:计数器的更多相关文章
- Flutter 开发入门实践
前言: Flutter 是 Google 推出的跨平台解决方案, 开发语言:Dart 优势: 劣势: 学习推荐: 官方网站:https://flutter.io/ 书籍:<Flutter技术入门 ...
- React:入门计数器
---恢复内容开始--- 把React的官网入门例子全看一遍,理解了,但自己从头开始写有点困难,这次强迫自己从头开始写,并写好注释: import React, { Component } from ...
- flutter快速入门
好久以前就听说了dart和flutter,只是一直没有时间去研究一下,最近有了些时间就简单的研究了一下,也算是快速的入门了.dart是Google开发的语言,目前最新的版本为2.1,官网地址https ...
- Flutter从入门到进阶实战携程网App_汇总贴
视频地址:https://coding.imooc.com/class/321.html?mc_marking=60e5294c605a87b2af7257d06f70505e&mc_chan ...
- Flutter安装入门教程
### 前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和 ...
- flutter从入门到精通五
在flutter的世界里,一切都是Widget,图像,文本,布局模型等等,一切都是Widget flutter中,尽量将Widget放在MaterialApp.其封装了所需要的一些Widget,Mat ...
- flutter从入门到精通四
widget Flutter 从 React 中吸取灵感(如果有react的编程经验,会很容易理解flutter),通过现代化框架创建出精美的组件. 它的核心思想是用 widget 来构建你的 UI ...
- flutter从入门到精通三
flutter可以通过一套代码运行在多个平台上,包括移动,web,桌面,嵌入式,但是在 Web 平台的支持尚未达到 Beta 阶段,请不要用在生产环节,在阅读文档时候,推荐大家阅读https://fl ...
- flutter从入门到精通一
Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台 flutter是基于dart语言开发的,我们将首先通过几章节 ...
随机推荐
- 题解-CTS2019 珍珠
题面 CTS2019 珍珠 有 \(n\) 个在 \([1,d]\) 内的整数,求使可以拿出 \(2m\) 个整数凑成 \(m\) 个相等的整数对的方案数. 数据范围:\(0\le m\le 10^9 ...
- CF1406E 【Deleting Numbers】
蒟蒻语 蒟蒻这次 \(CF\) 又双叒叕掉分了,\(C\) 都没有调出来. 还好再最后 \(10\) 秒钟调了下 \(E\) 块长 (块长 \(100\) => \(98\)),才没有掉得那么惨 ...
- Acwing 120. 防线
题目地址 题目简译:给定\(n\)个等差数列,每个等差数列的起点为\(s\),终点为\(e\),差为\(d\).整个序列中至多有一个位置所占数字是奇数.判断奇数位是否存在,如果不存在输出"T ...
- 第七周jieba分词
import jieba txt = open("聊斋志异简写版.txt", "r", encoding='utf-8').read() words = jie ...
- 重写Laravel异常处理类
现在开发前后端分离变得越来越流行了,后端只提供接口返回json格式的数据,即使是错误信息也要以json格式来返回,然而目前无论是Laravel框架还是ThinkPHP框架,都只提供了返回json数据的 ...
- PHP可变变量特性
可变变量 有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php$a = 'hello';?> 一个可变变量获取了一 ...
- Django项目连接多个数据库配置
1.设置数据库连接 pip install PyMySQL 2.在项目同名目录myproject/myproject下的__init__.py添加以下代码 import pymysql pymysql ...
- 简单了解一下 Nginx
一.Nginx 基本认识 1.Nginx 是什么? Nginx 是一款开源的.轻量级的.高性能的 HTTP 服务器 以及 反向代理服务器. 特点是 占有内存少.并发能力强. 2.Nginx 用来干什么 ...
- 【Objective-C】1.oc点语法
在Java中,我们可以通过"对象名.成员变量名"来访问对象的公共成员变量,这个就称为"点语法".比如: 1.在Student类的第2行定义了一个公共的成员变量a ...
- Intellij IDEA设置
代码格式化/保存时自动格式 搜索google-java-format 和 Save Actions,安装 保存时候// 自动空格 自动导包 自动换行