所以flutter中的基本脚手架有appbar、body和bottom bar。
在我的底部导航栏中,我有 3 个项目:
- 第 1 页(编辑器页面)
- 第 2 页(贴纸)
- 第3页(文字定制页面)
每个页面都有自己的脚手架。
编辑器页面有一个名为 LayoutCanvas 的小部件,如下所示:
Widget build(BuildContext context) {
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
CanvasModel.of(context).init(canvasKey!);
});
return Container(
Inside init
:
void init(GlobalKey canvasKey) {
_canvasKey = canvasKey;
final context = _canvasKey.currentContext;
if (context == null) return;
final bounds = context.findRenderObject()!.paintBounds;
final screenHeight = MediaQuery.of(context).size.height;
final screenWidth = MediaQuery.of(context).size.width;
var canvasHeight = screenHeight * 0.7;
var canvasWidth = layout.aspectRatio * canvasHeight;
Issue:
正如您所看到的,我将屏幕高度的 0.7 或 70% 作为画布高度,并从那里计算其余部分。但对于像编辑器画布这样的东西来说,70% 是相当小的。但如果我把它设置为 80%,一些编辑器就会被底部导航栏切断。
也许是screenHeight
没有考虑底部导航栏的高度吗?
我要么需要使其动态化,要么需要从中减去底部导航高度screenHeight
.
纵横比:
double get aspectRatio => isInitialized ? height / _layout!.height : 0;
我该如何解决这个问题?
为了获得最大可用高度,您需要分散一些值的注意力MediaQuery.of(context).size.height
。假设你有一个顶级AppBar
and a BottomNavigationBar
,您可以使用这个公式:
MediaQuery.of(context).size.height - // total height
kToolbarHeight - // top AppBar height
MediaQuery.of(context).padding.top - // top padding
kBottomNavigationBarHeight // BottomNavigationBar height
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)