在 flutter 中渲染时间后将子 Widget 的大小获取到父 Widget

Question

当我运行附加的 flutter 代码时，出现以下异常：

我应该对代码进行哪些修改以纠正异常？

PS 当我在Grid() class 下的getUnits()方法中改变_maxColumns和_maxRows变量时， size变量应该会改变。

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The getter 'width' was called on null.
Receiver: null
Tried calling: width

main.dart

import 'package:flutter/material.dart';
        
void main() => runApp(
      MaterialApp(
        home: HomeScreen(),
      ),
    );

GlobalKey _key = GlobalKey();

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Size size;
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    super.initState();
  }

  _afterLayout(_) {
    _getSizes();
  }

  _getSizes() {
    final RenderBox renderBox = _key.currentContext.findRenderObject();
    size = renderBox.size;
    print("SIZE of Box: $size");
  }

  @override
  Widget build(BuildContext context) {  
    return Scaffold(
        appBar: AppBar(
          title: Text('Grid Demo'),
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Container(
                  width: size.width,
                  height: size.height,
                  color: Colors.grey[200],
                  child: Grid(),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Container(color: Colors.grey, height: 200),
            ],
          ),
        ));
  }
}

class Grid extends StatelessWidget {
  List<Positioned> getUnits() {
    double _unitRadius = 50;
    List<Positioned> _units = [];
    double _leftCoordinate = 0;
    double _bottomCoordinate = 0;
    double _margin = 5;
    double _stepFromLeft = _unitRadius + _margin;
    double _stepFromBottom = _unitRadius + _margin;

    //when number of rows and columns change the size variable should change
    int _maxColumns = 20;
    int _maxRows = 20;

    for (int i = 0; i < _maxRows; i++) {
      for (int j = 0; j < _maxColumns; j++) {
        _units.add(Positioned(
            bottom: _bottomCoordinate,
            left: _leftCoordinate,
            child: Container(
              width: _unitRadius,
              height: _unitRadius,
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Center(child: Text('$i $j')),
            )));
        _leftCoordinate += _stepFromLeft;
      }
      _leftCoordinate = 0;
      _bottomCoordinate += _stepFromBottom;
    }

    return _units;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      key: _key,
      children: getUnits(),
    );
  }
}

Answer 1

您必须在initState中初始化您的size变量

@override
void initState() {
  super.initState();

  size = Size(0.0, 0.0);
  WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
}

然后，在您的_getSizes方法中，在构建所有内容时更改其内容

_getSizes() {
  final RenderBox renderBox = _key.currentContext.findRenderObject();
  setState(() {
    size = renderBox.size;
    print("SIZE of Box: $size");
  });
}

编辑
如果您只是想在Column小部件中使用SingleChildScrollView ，请像这样将SingleChildScrollView包装在Flexible中

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Flexible(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Container(
          color: Colors.grey[200],
          child: Grid(),
        ),
      ),
    ),
    SizedBox(
      height: 50,
    ),
    Container(color: Colors.grey, height: 200),
  ],
),

不要忘记删除Container中的width和height属性，并且不再需要size变量，因此您可以将其删除