如何獲取父級中 animation 值的子小部件大小

Question

雖然 flutter 正在增長，但有很多建議和“方法如何”。 我不確定什么是正確的，因為我對框架真的很陌生。

說，我有以下代碼（幾乎沒有減少）：

@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 ，我根據其子項的不同高度為一些小部件操作設置動畫。

孩子//1和//2 （和第三個）的height將在開發時被硬編碼，但是，因為有幾個這樣的元素和自定義小部件，我想自動獲取它們。 稍后，總而言之，這更易於維護，因為大多數地方的每個小部件都有一些動畫。

所以，我可以使用GlobalKey ，或者BoxConstraints ，但是 - 總而言之 - 如果構建為自定義小部件，那么最便宜的方法是什么？

結束這個問題：在GestureDetector中，我可以在初始布局完成后和每次重建后重建。

我只是不確定哪種方式安全且成本最低（在代碼中多次使用這些小部件）。

關於//1和//2 : //1是初始 animation begin: value, //2是中間停止的 value, // overall height是 animation end: value。 只是為了解釋。

至少：我在所有這些中使用states_rebuilder 。

Answer 1

除非它是常量，否則我們只能在渲染后獲取小部件的大小。 我們可以使用 ValueNotifier 在渲染后發送孩子的大小。

這是它的完整示例。

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;
  }
}

Answer 2

受@Thang Mai 接受的答案的啟發，我做了一個類似的無狀態解決方案：

class ChildSizeNotifier extends StatefulWidget {
  final Widget Function(BuildContext context, Size size, Widget child) builder;
  final Widget child;
  ChildSizeNotifier({
    Key? key,
    required this.builder,
    this.child,
  }) : super(key: key) {}

  @override
  State<ChildSizeNotifier> createState() => _ChildSizeNotifierState();
}

class _ChildSizeNotifierState extends State<ChildSizeNotifier> {
 final ValueNotifier<Size> _notifier = ValueNotifier(const Size(0, 0));

  @override
  void dispose() {
    _notifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback(
      (_) {
        notifier.value = (context.findRenderObject() as RenderBox).size;
      },
    );
    return ValueListenableBuilder(
      valueListenable: notifier,
      builder: builder,
      child: child,
    );
  }
}

像這樣使用它

ChildSizeNotifier(
  builder: (context, size, child) {
    // size is the size of the text
    return Text(size.height > 50 ? 'big' : 'small');
  },
)