Flutter框架入门篇（flutter mvvm框架）

原文：http://tryenough.com/flutter07

本文的目的在于：介绍快速入门Flutter的知识，学习本篇后你能更好的理解Flutter的框架结构。打好基础后，你可以选择把本文介绍到的每一项更深入的学习，以便完成更加复杂的功能。本文会以知识点加例子的方式来展开。本文将flutter的widget称为控件。

你将学到

1.常用控件的使用和介绍

2.常用添加手势的方法

3.根据用户操作动态改变控件状态

4.控件的一些简单生命周期事件

项目开篇介绍

一个Flutter项目从main函数中的runApp调用开始。在ranApp函数中所接收的控件会成为整个屏幕的根控件，并覆盖在整个屏幕。（可以将这个控件理解成iOS中的rootViewController或android中在manifest文件中配置的mainActivity的界面）。而其他的控件（widget）都是在这个根控件上添加的。

举个例子：在屏幕上显示一句hello world的代码：

这样一个效果的代码：

import 'package:flutter/material.dart';
void main() {
 runApp( // 接收的是根的widget
 new Center( //根的widget，Center可以在屏幕中心显示控件
 child: new Text(
 'Hello, world!',
 textDirection: TextDirection.ltr,
 ),
 ),
 );
}

常用的控件

• Text：该 widget 可让创建一个带格式的文本。
• Row、 Column： 这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。
• Stack： 取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
• Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

举例，使用简单控件自定义一个AppBar：

分析：

1. 用container来作为appbar的矩形框，设置了height（高度），padding（内边距），decoration（背景）等属性。在矩形内部添加了横向控件Row，分别添加了IconButton、Expanded和另一个IconButton分别代表左侧的图标、中间的标题和右边的图标。
2. 这里定义了一个title属性，它在Expanded中被使用。title的值由外部通过参数传入。这里告诉我们，widget可以被当作参数传递。

阅读更多 布局控件 >>>

使用 Material 组件

虽然我们可以自定义很多控件，但是Flutter还是预定义了很多的组件可以方便的直接使用。例如：

– Navigator管理由字符串标识的Widget栈，可以让您的应用程序在页面之间的切换。

看一个例子：

分析：

– 1.Material应用程序以MaterialApp widget开始。 是否使用MaterialApp完全是可选的，但是使用它是一个很好的做法。

– 2.AppBar 中，我们给参数leading、actions、title分别传一个widget

– 3.FloatingActionButton是右下角的按钮

• 此外，Scaffold也是一个widget，可以接收许多不同的widget的作为参数，其中的每一个被放置在Scaffold布局中相应的位置。

阅读更多 Material 组件 >>>

添加手势处理

可以使用手势检测器 GestureDetector 添加手势处理。例如自定义按钮的点击事件处理：

代码中的 GestureDetector widget并不具有显示效果，只能检测由用户做出的手势。 当用户点击Container时， GestureDetector会调用它的onTap回调， 在回调中，将消息打印到控制台。您可以使用GestureDetector来检测各种输入手势，包括点击、拖动和缩放。

常见的手势事件如下：

• Tap
• onTapDown 指针已经在特定位置与屏幕接触
• onTapUp 指针停止在特定位置与屏幕接触
• onTap tap事件触发
• onTapCancel 先前指针触发的onTapDown不会在触发tap事件
• 双击
• onDoubleTap 用户快速连续两次在同一位置轻敲屏幕.
• 长按
• onLongPress 指针在相同位置长时间保持与屏幕接触
• 垂直拖动
• onVerticalDragStart 指针已经与屏幕接触并可能开始垂直移动
• onVerticalDragUpdate 指针与屏幕接触并已沿垂直方向移动.
• onVerticalDragEnd 先前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动
• 水平拖动
• onHorizontalDragStart 指针已经接触到屏幕并可能开始水平移动
• onHorizontalDragUpdate 指针与屏幕接触并已沿水平方向移动
• onHorizontalDragEnd 先前与屏幕接触并水平移动的指针不再与屏幕接触，并在停止接触屏幕时以特定速度移动

稍微复杂点的例子，listView多状态处理

效果：

整个效果分两部分讲解：

– 1.listview部分

– 2.cell部分（listview中的每一行）

ListView

import 'package:flutter/material.dart';
void main() {
 runApp(new MaterialApp(
 title: 'Shopping App',
 home: new ShoppingList(
 products: <Product>[
 new Product(name: 'Eggs'),
 new Product(name: 'Flour'),
 new Product(name: 'Chocolate chips'),
 ],
 ),
 ));
}
class ShoppingList extends StatefulWidget {
 ShoppingList({Key key, this.products}) : super(key: key);
 final List<Product> products; //接收main函数中传递过来的数据
 @override
 _ShoppingListState createState() => new _ShoppingListState();
}
class _ShoppingListState extends State<ShoppingList> {
 Set<Product> _shoppingCart = new Set<Product>();
 void _handleCartChanged(Product product, bool inCart) {
 setState(() { //调用setState会触发重新构建界面
 if (inCart)
 _shoppingCart.add(product);
 else
 _shoppingCart.remove(product);
 });
 }
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('Shopping List'),
 ),
 body: new ListView(
 padding: new EdgeInsets.symmetric(vertical: 8.0),
 children: widget.products.map((Product product) { //遍历父控件的值构建ListView
 return new ShoppingListItem( //构建cell
 product: product,
 inCart: _shoppingCart.contains(product), //传递inCart值
 onCartChanged: _handleCartChanged, //传递点击函数
 );
 }).toList(),
 ),
 );
 }
}

Cell部分

class Product {
 const Product({this.name});
 final String name;
}
typedef void CartChangedCallback(Product product, bool inCart);
class ShoppingListItem extends StatelessWidget {
 ShoppingListItem({Product product, this.inCart, this.onCartChanged}) //接收父控件传递过来的值
 : product = product,
 super(key: new ObjectKey(product));
 final Product product;
 final bool inCart;
 final CartChangedCallback onCartChanged;
 Color _getColor(BuildContext context) {
 return inCart ? Colors.black54 : Theme.of(context).primaryColor; //根据inCart不同值显示不同颜色
 }
 TextStyle _getTextStyle(BuildContext context) {
 if (!inCart) return null;
 return new TextStyle(
 color: Colors.black54,
 decoration: TextDecoration.lineThrough,
 );
 }
 @override
 Widget build(BuildContext context) {
 return new ListTile( //构造cell
 onTap: () { //点击方法，调用父控件传递过来的方法
 onCartChanged(product, !inCart);
 },
 leading: new CircleAvatar(
 backgroundColor: _getColor(context),
 child: new Text(product.name[0]),
 ),
 title: new Text(product.name, style: _getTextStyle(context)),
 );
 }
}

查看完整代码 >>