Flutter如何获取动态widget的大小

Question

我做了什么：

黑色矩形是画布的大小。

const double radius = 50;


class TableShape extends StatelessWidget {
  final String name;
  final Color color;

  const TableShape({
    Key? key,
    required this.name,
    required this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap:(){debugPrint("ok");},
        child: LayoutBuilder(
          builder: (context, constraints) {
            final maxWidth = constraints.maxWidth;
            final textPainter = TextPainter(
                text: TextSpan(
                  text: name,
                  style: const TextStyle(fontFamily: 'Graphik', fontSize: 30, color: Colors.white),
                ),
                textDirection: TextDirection.ltr,
                textAlign: TextAlign.center
            );
            textPainter.layout(maxWidth: maxWidth);
            return CustomPaint(
              size: Size(textPainter.width>radius*2?textPainter.width:radius*2, radius*2),
              painter: MyPainter(color: color, txt: textPainter),
            );
            })
    );
  }
}

class MyPainter extends CustomPainter {
  TextPainter txt;
  Color color;

  MyPainter({
    required this.txt,
    required this.color,
  });

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));
    var paint = Paint()..color = color;
    bool txtLarger = txt.width>radius*2;

    canvas.drawCircle(Offset(txtLarger?txt.width/2:radius,radius), radius, paint);

    //table name:

    txt.paint(canvas, Offset(txtLarger?0:radius-txt.width/2,radius-txt.height/2));

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  @override
  bool hitTest(Offset position) {
    return sqrt(pow(txt.width/2-position.dx,2)+pow(radius-position.dy,2)) <= radius;
  }

}

我需要获取宽度，因为我根据宽度将小部件放置在屏幕上。宽度是动态的：文本越大，画布越宽。是否可以 ？或者也许您有其他方法来获取这个小部件而不是我的方法？

Answer 1

使用GlobalKey查找RenderBox然后获取size. 请记住，您需要确保小部件已呈现。

例子：

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) => const MaterialApp(home: Home());
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {
  var key = GlobalKey();
  Size? redboxSize;

  @override
  void initState() {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      setState(() {
        redboxSize = getRedBoxSize(key.currentContext!);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example')),
      body: Column(
        children: [
          SizedBox(
            height: 100,
            child: Center(
              child: Container(
                key: key,
                child: const Text('Hello oooooooooooooooo'),
                color: Colors.redAccent,
              ),
            ),
          ),
          if (redboxSize != null) Text('Redbox size: $redboxSize')
        ],
      ),
    );
  }

  Size getRedBoxSize(BuildContext context) {
    final box = context.findRenderObject() as RenderBox;
    return box.size;
  }
}

Answer 2

通过全局键获取小部件大小：

  final GlobalKey _widgetKey = GlobalKey();

  Size _getSize(GlobalKey key){
    final State state = key.currentState;
    final BuildContext context = key.currentContext;

    final RenderBox box = state.context.findRenderObject();
    return context.size;
  }

  Widget build(BuildContext context) {
    return GestureDetector(
        key: _widgetKey,
        onTap:(){_getSize(_widgetKey);},
        child: LayoutBuilder(
          builder: (context, constraints) {