Flutter框架入门精华篇

---

原文链接

更多教程

---

本文的目的在于：介绍快速入门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)),
    );
  }
}

---

原文链接

更多教程

---