dart - 在未渲染时获取小部件的大小/位置的最佳方法

Question

我知道，如何获取小部件的大小/位置。但是问题是，如果我们想获得FutureBuilder成功后将显示的小部件的大小/位置，那我们如何得到？

更清楚的是:

我有下面的小部件的层次结构。

• CustomScrollView
  • SliverAppBar
  • SliverToBoxAdapter
    • SingleChildScrollView
      • Column
      • Container // Covered full Scree
      • Button
        || <-- based on button Click *//My own code*
        Container
        Child ~> null OR FutureBuilder *//My own code*

Container小部件中介绍了此 FutureBuilder 。我想得到
此 Container小部件的大小/位置。

我做到了，但是没有正确的方法。

child: FutureBuilder<MealModelData>(
          future: _futureForMealList,
          builder:
              (BuildContext context, AsyncSnapshot<MealModelData> snapshot) {

                if (snapshot.data != null) {
                  MealModelData mealMdl = snapshot.data;
                  List<MealList> mealList = mealMdl.mealList;

                  if (mealMdl != null)
                    return ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: mealList.length,
                      itemBuilder: (BuildContext context, int index) {

                        if (index == mealList.length - 1 && !isGotPos{
                          isGotPos= true;
                          _callBackForGetTopPosition();
                        }

                       .
                       .                       .
                       .                       .
                       .                       .
                       .                       .
                       .                       .

方法代码是:

_callBackForGetTopPosition() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final RenderBox renderBoxRed =
          _keyForListView.currentContext.findRenderObject();
      final positionRed = renderBoxRed.localToGlobal(Offset.zero);
      print('X = ${positionRed.dx} and Y = ${positionRed.dy}')

    });
  }             

我发现了这个 How to get a height of a Widget?

但无法声明 SchedulerBinding.instance.....

Answer 1

您可以使用 LayoutBuilder 确定小部件的大小。这是一个示例，以演示小部件的工作方式。LayoutBuilder小部件的一种使用情况是确定可显示小部件的尺寸，并根据其大小调整尺寸。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var dimension = 40.0;

  increaseWidgetSize() {
    setState(() {
      dimension += 20;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(children: <Widget>[
          Text('Dimension: $dimension'),
          Container(
            color: Colors.teal,
            alignment: Alignment.center,
            height: dimension,
            width: dimension,
            // LayoutBuilder inherits its parent widget's dimension. In this case, the Container in teal
            child: LayoutBuilder(builder: (context, constraints) {
              debugPrint('Max height: ${constraints.maxHeight}, max width: ${constraints.maxWidth}');
              return Container(); // create function here to adapt to the parent widget's constraints
            }),
          ),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increaseWidgetSize,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

演示版

日志

I/flutter (26712): Max height: 40.0, max width: 40.0
I/flutter (26712): Max height: 60.0, max width: 60.0
I/flutter (26712): Max height: 80.0, max width: 80.0
I/flutter (26712): Max height: 100.0, max width: 100.0