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分别代表左侧的图标、中间的标题和右边的图标。
    1. 这里定义了一个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)),
    );
  }
}

查看完整代码 >>

发表评论

关闭菜单