Flutter 构建完整应用手册-处理手势

原创
2018/04/09 17:24
阅读数 3.8K

处理点击

我们不仅希望向用户展示信息,还希望我们的用户与我们的应用进行互动! 那么,我们如何回应基本操作,如点击拖动? 我们将使用GestureDetector部件!

假设我们想要制作一个自定义按钮,当点击时显示snackbar。 我们如何解决这个问题?

路线

  1. 创建按钮
  2. onTap回调将其包装在GestureDetector
// Our GestureDetector wraps our button
new GestureDetector(
  // When the child is tapped, show a snackbar 
  onTap: () {
    final snackBar = new SnackBar(content: new Text("Tap"));

    Scaffold.of(context).showSnackBar(snackBar);
  },
  // Our Custom Button!
  child: new Container(
    padding: new EdgeInsets.all(12.0),
    decoration: new BoxDecoration(
      color: Theme.of(context).buttonColor,
      borderRadius: new BorderRadius.circular(8.0),
    ),
    child: new Text('My Button'),
  ),
);

笔记

完整例子

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Gesture Demo';

    return new MaterialApp(
      title: title,
      home: new MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(child: new MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Our GestureDetector wraps our button
    return new GestureDetector(
      // When the child is tapped, show a snackbar
      onTap: () {
        final snackBar = new SnackBar(content: new Text("Tap"));

        Scaffold.of(context).showSnackBar(snackBar);
      },
      // Our Custom Button!
      child: new Container(
        padding: new EdgeInsets.all(12.0),
        decoration: new BoxDecoration(
          color: Theme.of(context).buttonColor,
          borderRadius: new BorderRadius.circular(8.0),
        ),
        child: new Text('My Button'),
      ),
    );
  }
}

添加材质涟漪效果

在设计应遵循材质设计指南的应用程序时,我们希望在点击时将涟漪动画添加到部件。

Flutter提供InkWell部件来达到这个效果。

路线

  • 创建一个我们想要点击的部件
  • 将其包装在InkWell部件中以管理点击回调和涟漪动画
// The InkWell Wraps our custom flat button Widget
new InkWell(
  // When the user taps the button, show a snackbar
  onTap: () {
    Scaffold.of(context).showSnackBar(new SnackBar(
      content: new Text('Tap'),
    ));
  },
  child: new Container(
    padding: new EdgeInsets.all(12.0),
    child: new Text('Flat Button'),
  ),
);

完整例子

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'InkWell Demo';

    return new MaterialApp(
      title: title,
      home: new MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(child: new MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // The InkWell Wraps our custom flat button Widget
    return new InkWell(
      // When the user taps the button, show a snackbar
      onTap: () {
        Scaffold.of(context).showSnackBar(new SnackBar(
          content: new Text('Tap'),
        ));
      },
      child: new Container(
        padding: new EdgeInsets.all(12.0),
        child: new Text('Flat Button'),
      ),
    );
  }
}

实现划动消除

“划动消除”模式在很多移动应用中很常见。 例如,如果我们正在编写一个电子邮件应用程序,我们可能希望允许我们的用户在列表中划离邮件消息。 当他们这样做时,我们需要将该项目从收件箱移至垃圾箱。

Flutter通过提供Dismissible部件使这项任务变得简单。

路线

  • 创建条目列表
  • 将每个项目包裹在Dismissible部件中
  • 提供“向后消除”指标

1.创建条目列表

这个配方的第一步是创建一个我们可以滑动的项目列表。 有关如何创建列表的更多详细说明,请按照使用长列表配方进行操作。

创建一个数据源
在我们的例子中,我们需要20个样品条目。 为了简单起见,我们将生成一个字符串列表。

final items = new List<String>.generate(20, (i) => "Item ${i + 1}");

将数据源转换为List
首先,我们将简单地在屏幕上的列表中显示每个条目。 用户将无法用这些物品轻轻一扫!

new ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return new ListTile(title: new Text('${items[index]}'));
  },
);

2.将每个项目包裹在Dismissible部件中

现在我们正在显示项目列表,我们希望让用户能够将每个项目从列表中移除!

用户将该项目删除后,我们需要运行一些代码以从列表中删除该项目并显示Snackbar。 在真实的应用程序中,您可能需要执行更复杂的逻辑,例如从Web服务或数据库中删除项目。

这是Dismissible部件发挥作用的地方! 在我们的例子中,我们将更新我们的itemBuilder函数以返回一个Dismissible部件。

new Dismissible(
  // Each Dismissible must contain a Key. Keys allow Flutter to
  // uniquely identify Widgets.
  key: new Key(item),
  // We also need to provide a function that will tell our app
  // what to do after an item has been swiped away.
  onDismissed: (direction) {
    // Remove the item from our data source
    items.removeAt(index);

    // Show a snackbar! This snackbar could also contain "Undo" actions.
    Scaffold.of(context).showSnackBar(
        new SnackBar(content: new Text("$item dismissed")));
  },
  child: new ListTile(title: new Text('$item')),
);

3.提供“向后消除”指标

就目前来看,我们的应用程序将允许用户从列表中滑动项目,但它可能不会让他们看到他们做什么时会发生什么。 为了提供我们正在移除项目的提示,我们将在屏幕上滑动该项目时显示“划动消除”指示符。 在这种情况下,红色背景!

为此,我们将为Dismissible提供background参数。

new Dismissible(
  // Show a red background as the item is swiped away
  background: new Container(color: Colors.red),
  key: new Key(item),
  onDismissed: (direction) {
    items.removeAt(index);

    Scaffold.of(context).showSnackBar(
        new SnackBar(content: new Text("$item dismissed")));
  },
  child: new ListTile(title: new Text('$item')),
);

完整例子

 

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp(
    items: new List<String>.generate(20, (i) => "Item ${i + 1}"),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];

            return new Dismissible(
              // Each Dismissible must contain a Key. Keys allow Flutter to
              // uniquely identify Widgets.
              key: new Key(item),
              // We also need to provide a function that will tell our app
              // what to do after an item has been swiped away.
              onDismissed: (direction) {
                items.removeAt(index);

                Scaffold.of(context).showSnackBar(
                    new SnackBar(content: new Text("$item dismissed")));
              },
              // Show a red background as the item is swiped away
              background: new Container(color: Colors.red),
              child: new ListTile(title: new Text('$item')),
            );
          },
        ),
      ),
    );
  }
}

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部