时间戳

首页 > 解决方案 > 检测小部件何时在 Flutter 中更改位置

dart - 检测小部件何时在 Flutter 中更改位置

问题描述

有什么方法可以检测小部件何时更改位置？比如键盘弹起，内容上移的时候？我想在不依赖焦点事件或尝试检测键盘状态的情况下检测到这一点。

这是一个示例应用程序：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyTextField()
        )
      )
    );
  }
}

class MyTextField extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return TextField();
  }

}

当它被聚焦时，你如何检测何时MyTextField向上移动？

标签： dartflutter

解决方案

您可以使用WidgetsBindingObserver来检测指标何时发生变化，这里有一个示例，但您必须使用 GlobalKey 来检查 Widget 的新位置：

    class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
      GlobalKey _key = GlobalKey();

      @override
      void initState() {
        WidgetsBinding.instance.addObserver(this);
        super.initState();
      }

      @override
      void dispose() {
        WidgetsBinding.instance.removeObserver(this);
        super.dispose();
      }

      @override
      void didChangeMetrics() {
        final RenderBox renderBox = _key.currentContext.findRenderObject();
        final position = renderBox.localToGlobal(Offset.zero);
        print("position : ${position.dx},${position.dy}");
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: MyTextField(
              key: _key,
            ),
          ),
        );
      }
    }

    class MyTextField extends StatelessWidget {
      const MyTextField({Key key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return TextField();
      }
    }

推荐阅读