亲宝软件园·资讯

展开

Flutter项目手势运用及单独指针消歧问题解决方案

黎燃 人气:0

对于手势的运用

指针表示用户与设备屏幕交互的原始数据。有四种类型的指针事件 PointerDownEvent指针触摸屏幕上的特定位置 PointerMoveEvent指针从屏幕上的一个位置移动到另一个位置 PointerUpEvent指针停止触摸屏幕 PointerCancelEvent指针的输入事件不再针对此应用程序(事件取消)

 Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            _active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

当按下指针时,框架将在应用程序上执行_点击测试_,以确定指针与屏幕相交的位置存在哪些小部件。然后,指针按下事件(以及该指针的后续事件)被分发到_命中测试_找到的最里面的小部件。从那里,这些事件将在小部件树中弹出。这些事件将从最里面的小部件分发到小部件根路径上的所有小部件。没有取消或停止冒泡过程的机制。 要直接从窗口小部件层侦听指针事件,请使用侦听器窗口小部件。然而,一般来说,考虑使用手势(如下所述)。要直接从小部件层侦听指针事件,可以使用Listenerwidgets。

单独指针

手势表示可以从多个单独指针事件(甚至多个单独的指针)中识别的语义动作(如敲击、拖动和缩放)。一个完整的手势可以调度多个事件,对应于手势的生命周期(例如,拖动开始、拖动更新和拖动结束):

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

TaponTapDown指针已在特定位置与屏幕接触onTapUp指针停止在特定位置接触屏幕onTap tap事件触发onTapCancel之前由指针触发的onTapDown不会触发tap事件 双击DoubleTap可在同一位置连续两次快速点击屏幕 长按onLongPress指针可在同一位置长时间与屏幕保持接触 垂直拖动onVerticalDragStart指针已接触屏幕,并可能开始垂直移动。onVerticalDragUpdate指针已与屏幕接触并垂直移动OnVerticalDragEnd先前与屏幕接触且垂直移动的指针不再与屏幕接触,并在停止触摸屏幕时以特定速度移动 水平拖动onHorizontalDragStart指针已触摸屏幕,并可能开始水平移动onHorizontalDragUpdate指针接触屏幕并已水平移动onHorizontalDragEnd指针(以前接触屏幕并水平移动)不再接触屏幕,并在停止触摸屏幕时以特定速度移动 要从控件层监视手势,请使用手势检测器

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
      ),
    );
  }
}

如果使用“材质组件”,大多数小部件都会响应轻敲或手势。例如,IconButton和FlatButton响应按下(轻击),ListView响应滑动事件以触发滚动。如果不使用这些小部件,但希望在单击时具有“泼墨”效果,则可以使用InkWell。

消歧

在屏幕上的指定位置可能有多个手势检测器。当指针事件流通过并试图识别特定手势时,所有这些手势检测器都会监听指针事件流。手势检测器小部件确定它是哪个手势。 当屏幕上有多个给定指针的手势识别器时,框架通过向每个识别器添加“手势竞争场”来确定所需的手势。“手势比赛场”使用以下规则来确定哪个手势获胜 在任何时候,识别器都可以宣布失败并离开“手势比赛场”。如果“比赛场地”中只剩下一个标识符,则该标识符为获胜者

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //...
    Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          buildButtonColumn(Icons.call, 'CALL'),
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE'),
        ],
      ),
    );
  //...
}

在任何时候,识别器都可以宣布胜利,这将导致胜利,而所有剩余的识别器都将失败 例如,当消除水平和垂直拖动的歧义时,两个识别器在接收到指针向下事件时进入“手势竞争场”。识别器观察指针移动事件。如果用户将指针水平移动超过一定数量的逻辑像素,则水平识别器将宣布胜利,手势将被解释为水平拖动。类似地,如果用户垂直移动超过一定数量的逻辑像素,则垂直识别器将宣布获胜。 当仅水平(或垂直)拖动识别器时,“手势竞争场”是有益的。在这种情况下,“手势竞争领域”中只有一个识别器,水平拖动将立即被识别,这意味着第一个水平移动的像素可以被视为拖动,用户不需要等待进一步的手势消歧。

依赖包中的字体

如果包中定义的字体在内部使用,则在创建文本样式时还应指定包参数,如上面的示例所示。 包还可以提供字体文件,而无需输入pubspec Yaml。这些文件应位于包的lib/文件夹中。字体文件不会自动绑定到应用程序,应用程序可以在声明字体时选择性地使用这些字体。假设a_包中有一个包:

 flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf
           weight: 500

family是字体的名称。可以在TextStyle的fontFamily属性中使用它 资产相对于pubspec yaml文件的路径这些文件包含字体中的字形轮廓。构建应用程序时,这些文件将包含在应用程序的资产包中。 可以设置字体的粗细、倾斜和其他样式 weight属性指定字体的粗细。值范围是100到900(100的倍数)的整数。这些值对应于FontWeight,可用于TextStyle的FontWeight属性 样式指定字体是斜体还是普通字体。相应的值为斜体和普通值。这些值对应于fontStyle可用于TextStyle的fontStyle TextStyle属性

import 'package:flutter/material.dart';
const String words1 = "Almost before we knew it, we had left the ground.";
const String words2 = "A shining crescent far beneath the flying vessel.";
const String words3 = "A red flair silhouetted the jagged edge of a wing.";
const String words4 = "Mist enveloped the ship three hours out from port.";
void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Fonts',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FontsPage(),
    );
  }
}

在Flutter应用程序中使用字体需要两个步骤。首先在pubspec.yaml中声明它们,以确保它们包含在应用程序中。

加载全部内容

相关教程
猜你喜欢
用户评论