如何获取父级中动画值的子级小部件大小 [英] How to get child widget size for animation values in parent

问题描述

在扑朔迷离的同时，有很多建议和如何做。我不确定什么是正确的，因为我真的是框架的新手。

While flutter is growing, there are much recommendations and "ways how to". I am not sure what is correct as i am really new to the framework.

说，我有以下代码（几乎没有减少）：

Say, i have the following code (hardly reduced):

@override
Widget build(BuildContext context) {
  return GestureDetector(
    // heights are needed here for animation values
      child: Stack(
    children: <Widget>[
      Positioned(
        left: 0,
        right: 0,
        bottom: value,
        child: Column( // overall height
          children: <Widget>[
            Container(height: 60),  // 1
            Container(height: 150), // 2
            Container(height: 200),
          ],
        ),
      ),
    ],
  ));
}

在 GestureDetector 我正在根据其孩子的身高对一些小部件动作进行动画处理。

In the GestureDetector i am animating some widget actions, depending on different heights of it`s children.

孩子的高度 // 1 和 // 2 （和第三个）将在开发时设置为硬编码，但是，因为有许多这样的代码元素和自定义小部件，我想自动获取它们。以后，总的来说，这是更好的可维护性，因为几乎任何地方的每个小部件都具有一些动画。

The height of children //1 and //2 (and third) will be set hardcoded while developing, but, because there are several such elements and custom widgets, i want to get them automatically. Later on, this is better maintenable all in all, because mostly every widget anywhere has some animations.

因此，我可以使用 GlobalKey 或 BoxConstraints ，但是-总而言之-如果构建为自定义小部件，最便宜的方法是什么？

So, i can use GlobalKey, or maybe BoxConstraints, but - all in all - what is the cheapest way to do that if building as a custom widget?

要解决的问题：在 GestureDetector 中，我可以在完成初始布局后以及每次重建后重建。

To close the question: in GestureDetector i am able to rebuild after the initial layout is done and after every rebuild.

我只是不确定哪种方法是安全的并且具有最低的成本（代码中多次包含这些小部件）。

I am just not sure about which way is safe and has minimum costs (having those widgets several times in the code).

关于 // 1 和 // 2 ： // 1 是初始动画 begin：的值， // 2 是中间要停止的值， //总高度是动画 end：的值。只是为了解释。

About //1 and //2: //1 is the initial animation begin: value, //2 is a value in the middle to stop, // overall height is animation end: value. Just to explain.

至少：我在所有这些中都使用了 states_rebuilder 。

At least: i am using states_rebuilder inside all of that.

推荐答案

除非它是一个常量，否则我们只需要在渲染后获取它的大小即可。
我们可以使用ValueNotifier在渲染后发送子项的大小。

We just can get the size of a widget after it's rendered unless it is a constant. We can use ValueNotifier to send the size of the child after it rendered.

以下是完整的示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<Size> _size = ValueNotifier<Size>(Size(0, 0));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("example")
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ValueListenableBuilder(
              builder: (BuildContext context, Size value, Widget child) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Text('Height of the child: ${value.height}'),
                    Text('Width of the child: ${value.width}'),
                    SizeTrackingWidget(
                      child: Container(
                        height: MediaQuery.of(context).size.width*0.4,
                        width:  MediaQuery.of(context).size.width*0.3,
                        color: Colors.red
                      ),
                      sizeValueNotifier: _size,
                    )
                  ],
                );
              },
              valueListenable: _size,
              child: null,
            )
          ],
        ),
      ),
    );
  }
}


class SizeTrackingWidget extends StatefulWidget {
  Widget child;
  ValueNotifier<Size> sizeValueNotifier;
  SizeTrackingWidget({Key key, @required this.sizeValueNotifier, @required this.child}) : super(key: key);
  @override
  _SizeTrackingWidgetState createState() => _SizeTrackingWidgetState();
}

class _SizeTrackingWidgetState extends State<SizeTrackingWidget> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_){
      _getSize();
    });
  }

  _getSize() {
    RenderBox renderBox = context.findRenderObject();
    widget.sizeValueNotifier.value = renderBox.size;
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

这篇关于如何获取父级中动画值的子级小部件大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！