Flutter 技术入门与实战 (20):开启 Flutter 之旅 2.4

阅读数:4 2019 年 12 月 15 日 18:48

Flutter技术入门与实战(20):开启Flutter之旅 2.4

(无状态组件和有状态组件)

内容简介
第 1 章介绍 Flutter 的基本概念,并搭建第 yi 个 Flutter 程序,来感受一下 Flutter 之美。
第 2 章介绍几个重要知识点,如入口程序、Material Design、Flutter 主题、无状态组件和有状态组件、使用包资源、Http 请求。
第 3 章简单介绍 Dart 语言。Dart 语言是 Flutter SDK 指定的语言,我们很有必要补充一下它的基础知识,包括语法特性、基本语句、面向对象等。
第 4 章介绍常用组件。Flutter 里有一个非常重要的核心理念:一切皆为组件,本章主要讲解开发中用得 * 频繁的组件,如容器组件、图片组件、文本组件、图标组件和表单组件等。
第 5 章介绍 Material Design 风格的组件,Material Design 风格是一种非常有质感的设计风格,并提供一些默认的交互动画。本章将分类介绍这些组件。
第 6 章介绍 Cupertino 风格的组件,这是一类 iOS 风格的组件,如 CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView 等。
第 7 章介绍页面布局的基础知识和技巧,如基础布局处理、宽高尺寸处理、列表及表格布局等,* 后通过一个综合布局示例来演示如何编写复杂的页面。
第 8 章介绍如何处理手势,如轻击、拖动和缩放等。Flutter 中提供 GestureDetector 进行手势检测,并为手势检测提供了相应的监听。
第 9 章介绍如何加载、处理、展示资源和图片,如添加资源和图片、自定义字体等。
第 10 章介绍路由及导航是如何处理的,包括页面的渲染以及数据传递。
第 11 章介绍组件装饰和视觉效果的处理,如 Opacity(透明度处理)、DecoratedBox(装饰盒子)、RotatedBox(旋转盒子)、Clip(剪裁处理)和 CustomPainter(自定义画板)。
第 12 章介绍动画效果的制作,包含两个动画组件的使用:用 AnimatedOpacity 实现渐变效果、用 Hero 实现页面切换动画。
第 13 章介绍 Flutter 插件开发的入门知识。Flutter 插件可以和原生程序打交道,比如调用蓝牙、启用 WIFI、打开手电筒,等等。
第 14 章介绍开发工具及使用技巧,介绍几款常用的 IDE 工具,从代码的编写、辅助功能、程序调试、性能分析等多方面讲解工具及使用技巧。
第 15 章介绍测试与发布应用,包括:测试应用、发布 Android 版和 iOS 版 App。
第 16 章通过一个综合案例介绍如何使用 Flutter 实现即时通讯 App 的界面。

无状态组件(StatelessWidget)是不可变的,这意味着它们的属性不能改变,所有的值都是最终的。

有状态组件(StatefulWidget)持有的状态可能在 Widget 生命周期中发生变化。实现一个 StatefulWidget 至少需要两个类:

  • 一个 StatefulWidget 类。
  • 一个 State 类。StatefulWidget 类本身是不变的,但是 State 类在 Widget 生命周期中始终存在。

Flutter 的官方给出一个有状态组件的示例,点击右下角的 + 号按钮,应用界面中间的数字会加 1,如图 2-2 所示。

这个示例有几个关键的部分,解析如下。

示例代码中 MyHomePage 必须继承自 StatefulWidget 类,如下所示:

Flutter技术入门与实战(20):开启Flutter之旅 2.4

图 2-2 Flutter 官方示例
复制代码
class MyHomePage extends StatefulWidget

重写 createState 方法,如下所示:

复制代码
@override
MyHomePageState createState() => new _MyHomePageState();

状态类必须继承自 State 类,如下所示:

复制代码
class _MyHomePageState extends State<MyHomePage>

定义一个普通变量 _counter 作为计数器变量,调用 setState 方法来控制这个变量的值的变化,如下所示:

复制代码
int _counter = 0;
void _incrementCounter() {
setState(() {
// 计数器变量
_counter++;
});
}

完整的示例代码如下所示:

复制代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
//MyApp 不需要做状态处理,所以此组件继承 StatelessWidget 即可
class MyApp extends StatelessWidget {
// 这个组件是整个应用的主组件
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
// 自定义主题
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// 主页需要继承自 StatefulWidget
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// 标题
final String title;
// 必须重写 createState 方法
@override
_MyHomePageState createState() => new _MyHomePageState();
}
// 状态类必须继承 State 类, 注意后面需要指定为 <MyHomePage>
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;// 计数器
void _incrementCounter() {
// 调用 State 类里的 setState 方法来更改状态值,使得计数器加 1
setState(() {
// 计数器变量,每次点击让其加 1
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
// 居中布局
body: new Center(
// 垂直布局
child: new Column(
// 主轴居中对齐
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',// 绑定计数器的值
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,// 按下 + 号按钮调用自增函数
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
}

Flutter技术入门与实战(20):开启Flutter之旅 2.4

购书地址 https://item.jd.com/12526484.html?dist=jd

评论

发布