Flutter，如何获取小部件的大小？
Flutter，如何获取小部件的大小？
我发现了一个例子，可以获取小部件的大小/位置：
https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
我的代码有什么问题吗？
我得到了以下错误：
在处理手势时抛出了以下 NoSuchMethodError：
I/flutter ( 8566): 调用空对象的方法'findRenderObject'。
I/flutter ( 8566): 接收者：null
I/flutter ( 8566): 调用的方法：findRenderObject()
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MyWidgetSizeTMP());
}
}
class MyWidgetSizeTMP extends StatefulWidget{
@override
MyWidgetSizeTMPState createState() {
return new MyWidgetSizeTMPState();
}
}
class MyWidgetSizeTMPState extends State
//creating Key for red panel
GlobalKey _keyRed = GlobalKey();
_getSizes() {
final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
final sizeRed = renderBoxRed.size;
print("Red的大小：$sizeRed");
}
_getPositions() {
final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
final positionRed = renderBoxRed.localToGlobal(Offset.zero);
print("Red的位置：$positionRed ");
}
_afterLayout(_) {
_getSizes();
_getPositions();
}
@override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: Column(
children:
Flexible(
flex: 2,
child: Container(
color: Colors.red,
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.purple,
),
),
Flexible(
flex: 3,
child: Container(
color: Colors.green,
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children:
MaterialButton(
elevation: 5.0,
padding: EdgeInsets.all(15.0),
color: Colors.grey,
child: Text("获取大小"),
onPressed: _getSizes,
),
MaterialButton(
elevation: 5.0,
color: Colors.grey,
padding: EdgeInsets.all(15.0),
child: Text("获取位置"),
onPressed: _getPositions,
)
],
),
)
],
),
);
}
}
在这个问题中，原因是在代码中没有将GlobalKey分配给容器，所以无法从_getSizes()和_getPositions()中引用_keyRed，必须在使用之前将_keyRed附加到代码中的上下文中。
解决方法是在代码中为红色容器创建一个GlobalKey，并将其分配为红色容器的关键字。以下是解决方法的代码示例：
// 创建红色面板的键
GlobalKey _keyRed = GlobalKey();
...
// 设置关键字
Flexible(
flex: 2,
child: Container(
key: _keyRed, // 分配为红色容器的关键字
color: Colors.red,
),
),
通过执行上述步骤，您将能够在_getSizes()和_getPositions()中使用_keyRed来获取小部件的大小。
Flutter中如何获取小部件的大小？
这是因为您的代码中的_keyRed未附加到上下文中。
要修复它：
Widget build(BuildContext context) {
return Scaffold(
key: _keyRed, // Add this.
appBar: AppBar(
我明白了。可以通过构造函数将任何小部件所需的大小/位置的键传递给它。谢谢
我已经在使用全局键来显示snackbar弹出窗口。final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();如何将2个全局键传递给脚手架以修复此问题？
除非我误解了，否则这是否会返回脚手架的大小/位置？除非我误解，否则我怀疑Hamza在下面的回答实际上是正确的。
LayoutBuilder是Flutter提供的一个widget，它可以在构建过程中获取父widget给定的空间约束。在上述代码中，我们将要获取大小的widget包裹在LayoutBuilder中，然后在builder函数中，通过传入的BoxConstraints参数获取到最大的高度和宽度。
具体来说，BoxConstraints参数包含了widget在布局中可以使用的最大空间范围。通过调用constraints.maxHeight和constraints.maxWidth，我们可以分别获取到widget可以在垂直和水平方向上使用的最大空间。
在解决问题的过程中，我们只需将YourWidget替换为需要获取大小的widget即可。通过这种方式，我们可以在widget构建过程中动态地获取到其大小，以便进行后续的操作。
通过将需要获取大小的widget包裹在LayoutBuilder中，并利用builder函数中的BoxConstraints参数，我们可以轻松地获取到widget的大小信息。这种方法非常简单且有效，可以帮助我们在开发过程中更好地控制和布局widget的大小。