如何找到小部件尺寸以避免窗口小部件在设备区域外渲染时渲染

Question

在这里，我有一个中心偏移值，我需要将小部件定位，我在位置的小部件的帮助下将小部件放置在窗口小部件，并借助分数倾斜的小部件将小部件移至中心，并将其移至中心偏移量。

但是在这里，有些零件小部件在画布外面呈现，所以我想忽略屏幕外渲染的小部件的渲染。如果我得到小部件的大小，我就可以忽略渲染，但是我正在努力获得小部件的高度和宽度。

我已将代码段附加在下面的代码段供参考。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Positioned(
          left: 20,
          top: 150,
            child: FractionalTranslation(translation: const Offset(-0.5, -0.5),child: Container(
          color: Colors.grey,
          child: const Text('Widget size'),
        )))
      ]),
    );
  }
}

谢谢。

Answer 1

检查此解决方案，有点复杂，但值得一试：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double height = 0.0;
  double width = 0.0;
  final GlobalKey _globalKey = GlobalKey();

  @override
  void initState() {
    SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
      height = _globalKey.currentContext!.size!.height;
      width = _globalKey.currentContext!.size!.width;
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Positioned(
            left: 20,
            top: 150,
            key: _globalKey,
            child: FractionalTranslation(
                translation: const Offset(-0.5, -0.5),
                child: Container(
                  color: Colors.grey,
                  child: Text("      $height $width"),//added spaces so you can see it
                )))
      ]),
    );
  }
}

Answer 2

To get the screen width and height:

Screen width  : MediaQuery.of(context).size.width
Screen height : MediaQuery.of(context).size.height

To center the widget to the screen it is easy as below code.Center Widget do the trick

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: keyRed,
      appBar: AppBar(),
      body: Center(
        child: Container(
          color: Colors.grey,
          child: const Text('Widget size'),
        ),
      ),
    );
  }

Answer 3

我已经至少有一个问题，即您将一个容器置于容器的方式。但是，我试图在小部件的尺寸选项上找到一个处理。有02种方法，用扑来。

1. 将MediaQuery用于给定上下文

• 最终双屏幕宽度：MediaQuery.of（上下文）.size.Width
• final double double screitHeight：MediaQuery.of（context）.Size.Height

2. 使用约束参数参数。这是带有LayoutWidget的示例。我希望这两种方法对您有帮助。

    Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Positioned(
            left: 20,
            top: 150,
            child: FractionalTranslation(
              translation: const Offset(-0.5, -0.5),
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  if (constraints.maxWidth < 600) {
                    return Container(
                      color: Colors.teal,
                      width: 150,
                      height: 150,
                      child: const Text('Widget size'),
                    );
                  } else {
                    return Container(
                      color: Colors.grey,
                      width: 350,
                      height: 350,
                      child: const Text('Widget size'),
                    );
                  }
                },
              ),
            ))
      ]),
    );