dart - 在 flutter 中使用其 GlobalKey 获取 Widget 的高度

我正在努力使用其 GlobalKey 获取 Widget 的高度。 在呈现布局后调用获取高度的函数以确保上下文可用,但 key.currentState 和 key.currentContext 仍然返回 null。

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => new TestPageState();
}

class TestPageState extends State<TestPage>{
  final TestWidget testWidget = new TestWidget();

  @override
  initState() {
    //calling the getHeight Function after the Layout is Rendered
    WidgetsBinding.instance
        .addPostFrameCallback((_) => getHeight());

    super.initState();
  }

  void getHeight(){
    final GlobalKey key = testWidget.key;

    //returns null:
    final State state = key.currentState;
    //returns null:
    final BuildContext context = key.currentContext;

    //Error: The getter 'context' was called on null.
    final RenderBox box = state.context.findRenderObject();

    print(box.size.height);
    print(context.size.height);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: testWidget,
    );
  }
}

class TestWidget extends StatefulWidget{
  @override
  Key get key => new GlobalKey<TestWidgetState>();

  @override
  State<StatefulWidget> createState() => new TestWidgetState();
}

class TestWidgetState extends State<TestWidget>{
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Text("Test", style: const TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),),
    );
  }
}

最佳答案

您需要在小部件构造函数中使用 super 将该键分配给小部件。不要将其添加为字段。 Key 也必须是常量。

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new TestPageState();
}

class TestPageState extends State<TestPage> {
  final key = new GlobalKey<TestWidgetState>();

  @override
  initState() {
    //calling the getHeight Function after the Layout is Rendered
    WidgetsBinding.instance.addPostFrameCallback((_) => getHeight());

    super.initState();
  }

  void getHeight() {
    //returns null:
    final State state = key.currentState;
    //returns null:
    final BuildContext context = key.currentContext;

    //Error: The getter 'context' was called on null.
    final RenderBox box = state.context.findRenderObject();

    print(box.size.height);
    print(context.size.height);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new TestWidget(key: key),
    );
  }
}

class TestWidget extends StatefulWidget {
  TestWidget({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => new TestWidgetState();
}

class TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Text(
        "Test",
        style: const TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
      ),
    );
  }
}

https://stackoverflow.com/questions/50115416/

相关文章:

google-maps - 使用 Flutter Google Maps 插件自定义标记

flutter - 如何在 Flutter 应用中获取屏幕大小?

flutter - 如何在 flutter 应用程序中无上下文导航?

android-studio - 在指定位置找不到 Flutter SDK - 在 Android

flutter - 获取相对于小部件的点击位置

dart - 如何在没有用户交互的情况下发送短信?

dart - Flutter:如何检测键盘按Enter?

dart - 成功验证后不会调用 Flutter TextFormField onSave()

flutter - 如何从 Dart 中的 future 返回错误?

dart - 如何使用 flutter 删除 Firestore 文档中的字段