Flutter框架入门篇-技术精选-玖叶教程网

原文：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：

分析：

用container来作为appbar的矩形框，设置了height（高度），padding（内边距），decoration（背景）等属性。在矩形内部添加了横向控件Row，分别添加了IconButton、Expanded和另一个IconButton分别代表左侧的图标、中间的标题和右边的图标。
这里定义了一个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)),
 );
 }
}

查看完整代码 >>

玖叶教程网

前端编程开发入门

Flutter框架入门篇