Flutter光标追踪插件cursor_tracker的使用

Flutter光标追踪插件cursor_tracker的使用

开始使用

这个项目是一个新的Dart包项目，用于创建可以在多个Flutter或Dart项目中轻松共享的库模块。

如果你刚开始使用Flutter，可以查看我们的在线文档，其中包含教程、示例、移动开发指南以及完整的API参考。

示例代码

以下是使用cursor_tracker插件的一个完整示例：

import 'package:flutter/material.dart';
import 'package:cursor_tracker/cursor_tracker.dart'; // 导入cursor_tracker插件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试运行你的应用。你会看到应用有一个蓝色工具栏。然后，不退出应用，尝试将下面的主色调改为绿色并调用“热重载”（在你运行“flutter run”的控制台中按“r”，或者直接保存更改以在Flutter IDE中进行“热重载”）。请注意，计数器没有重置回零；应用程序不会重新启动。
        primarySwatch: Colors.blue,
        // 这使视觉密度适应你运行应用的平台。对于桌面平台，控件会更小且更紧密（更密集）而不是在移动平台上。
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // 这个小部件是你的应用的首页。它是有状态的，意味着它有一个包含影响其外观字段的状态对象（定义在下面）。
  //
  // 这个类是状态的配置。它保存了由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题）并被状态的构建方法使用。小部件子类中的字段总是标记为“final”。

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  CursorTracker cursorTracker; // 创建一个CursorTracker实例

  [@override](/user/override)
  void initState() {
    super.initState();
    cursorTracker = CursorTracker(); // 初始化CursorTracker
  }

  void _incrementCounter() {
    setState(() {
      // 这次调用setState告诉Flutter框架某些东西已经改变，在这种情况下，会导致它重新运行下面的构建方法，以便反映更新后的值。如果我们不调用setState()而改变_counter，则构建方法将不会再次被调用，因此似乎什么都不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会被重新运行，例如上面的_incrementCounter方法所做的一样。
    //
    // Flutter框架已经被优化以使重建方法快速运行，因此你可以简单地重建任何需要更新的内容，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其定位在其父元素的中间。
        child: Column(
          // Column也是一个布局小部件。它接受一个小部件列表并将它们垂直排列。默认情况下，它会根据其子元素水平调整自身大小，并尝试与它的父元素一样高。
          //
          // 调用“调试绘制”（在控制台中按“p”，选择Android Studio中的Flutter Inspector中的“切换调试绘制”动作，或者Visual Studio Code中的“切换调试绘制”命令）可以看到每个小部件的线框。
          //
          // Column有几个属性来控制它如何调整自身大小和如何放置其子元素。这里我们使用mainAxisAlignment将子元素垂直居中；主要轴在这里是垂直的（交叉轴将是水平的）。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // 这个尾随的逗号使自动格式化更美观。
      // 添加一个监听光标的文本字段
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
          child: Center(
            child: Text('Cursor position: ${cursorTracker.position?.toString()}'), // 显示光标位置
          ),
        ),
      ),
    );
  }
}