在 SafeArea 中获取小部件高度的正确方法 [英] proper way to get widget height in SafeArea
问题描述
我正在尝试获取小部件的高度,但它打印的值相同
<块引用>I/flutter (19253):全高:976.0I/flutter (19253):安全高度:976.0
我猜第二个值应该更小,因为 Container 放置在状态栏下方.我做错了什么?我需要高度,因为在这个容器中将是 Wrap 小部件(实际上是 ReorderableWrap https://pub.dartlang.org/packages/reorderables#-readme-tab-) 包含 36 张卡片,3 行 x 12 张卡片,卡片高度必须为其容器的 1/3.
我没有找到好的可重排网格.但无论如何,我的问题是为什么安全区域中的 Container 与填满整个屏幕的 Container 具有相同的高度?
import 'package:flutter/material.dart';无效的主要(){runApp(_MyApp());}类 _MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回材料应用程序(debugShowCheckedModeBanner:假,家:脚手架(身体:_Body()),);}}类 _Body 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){print('全高:${MediaQuery.of(context).size.height}');返回容器(约束:BoxConstraints.expand(),装饰:BoxDecoration(颜色:Colors.red),孩子:安全区(孩子:_SafeHeightWidget(),),);}}类 _SafeHeightWidget 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){print('安全高度:${MediaQuery.of(context).size.height}');返回容器(颜色:Colors.lightBlue,);}}
在这种情况下,您始终可以使用 LayoutBuilder
.
child: SafeArea(孩子:新的LayoutBuilder(构建器:(BuildContext 上下文,BoxConstraints 约束){//约束变量具有大小信息返回容器();}),),
更多信息:https://www.youtube.com/watch?v=IYDVcriKjsw
I'm trying to get the height of widget but it prints the same values
I/flutter (19253): full height: 976.0 I/flutter (19253): safe height: 976.0
I guessed the second value should be smaller because the Container placed below the status bar. What I'm doing wrong? I need height because in this container will be Wrap widget (actually ReorderableWrap https://pub.dartlang.org/packages/reorderables#-readme-tab-) with 36 cards, 3 rows by 12 cards and cards height must be 1/3 of its container.
I didn't find good Reorderable Grid. But anyway my question why a Container in a safe area has the same height as Container that fills the entire screen?
import 'package:flutter/material.dart';
void main() {
runApp(_MyApp());
}
class _MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(body: _Body()),
);
}
}
class _Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('full height: ${MediaQuery.of(context).size.height}');
return Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(color: Colors.red),
child: SafeArea(
child: _SafeHeightWidget(),
),
);
}
}
class _SafeHeightWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('safe height: ${MediaQuery.of(context).size.height}');
return Container(
color: Colors.lightBlue,
);
}
}
You can always use LayoutBuilder
for such cases.
child: SafeArea(
child: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// constraints variable has the size info
return Container();
}
),
),
for more info: https://www.youtube.com/watch?v=IYDVcriKjsw
这篇关于在 SafeArea 中获取小部件高度的正确方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!