Flutter 约束布局,使其不超出定位小部件的范围

Flutter 约束布局,使其不超出定位小部件的范围,flutter,flutter-positioned,Flutter,Flutter Positioned,我目前正在制作一个布局,在整个屏幕上显示一个定位的小部件。 它将自身定位在检测到的条形码附近,请查看下面的图像以获取示例 但是,当条形码移动到屏幕左边缘时,UI元素会部分画出屏幕外。有没有一种方法可以解决这个问题,而不必计算每一帧的出界时间 以下是我用来设置此设置的代码: Widget\u buildImage(){ 返回容器( 约束:const-BoxConstraints.expand(), 子项:_控制器==null ?康斯特中心( 子:文本( “正在初始化摄影机…”, 样式:Text

我目前正在制作一个布局,在整个屏幕上显示一个
定位的
小部件。 它将自身定位在检测到的条形码附近,请查看下面的图像以获取示例

但是,当条形码移动到屏幕左边缘时,UI元素会部分画出屏幕外。有没有一种方法可以解决这个问题,而不必计算每一帧的出界时间

以下是我用来设置此设置的代码:

Widget\u buildImage(){
返回容器(
约束:const-BoxConstraints.expand(),
子项:_控制器==null
?康斯特中心(
子:文本(
“正在初始化摄影机…”,
样式:TextStyle(
颜色:颜色。绿色,
字体大小:30.0,
),
),
)
:堆栈(
fit:StackFit.expand,
儿童:[
CameraPreview(_控制器!),
_buildResults(),
if(_scanResults.isNotEmpty)
_buildUIElements()
],
),
);
}
小部件_buildUIElements(){
条形码=_scanResults[0];
最终尺寸imageSize=尺寸(
_控制器!.value.previewSize!.height,
_控制器!.value.previewSize!.width,
);
var boundingBox=条形码。boundingBox!;
var rect=scal直立(rect:boundingBox,imageSize:imageSize,widgetSize:MediaQuery.of(context.size));
返回动画定位(
顶部:矩形底部,
左:rect.left,
孩子:卡片(
child:Text('这是一个amazing产品'),
),
持续时间:常量持续时间(毫秒:500),
);
}
也许有更好的方法来实现这一点

不要介意过度使用
仍在学习整个空安全性:)

编辑1: 正如pskink所建议的那样,我已经研究了flatter中的工具提示是如何工作的,并将
SingleChildLayoutDelegate
CustomSingleChildLayout
结合使用,这非常适合于跟踪位置,但现在没有选项来设置动画

我的委托类如下所示:

类CustomSingleChildDelegate扩展了SingleChildLayoutDelegate{
CustomSingleChildDelegate({
需要这个目标,
需要此垂直偏移,
要求如下所示:,
});
最终偏移量目标;
最终双垂直偏移;
最终目标如下;
@凌驾
BoxConstraints getConstraintsForChild(BoxConstraints)=>constraints.release();
@凌驾
偏移量getPositionForChild(大小,大小childSize){
返回位置依赖框(
尺寸:尺寸,
childSize:childSize,
目标:目标,,
垂直偏移:垂直偏移,
preferdown:preferdown,
);
}
@凌驾
bool shouldrellayout(CustomSingleChildDelegate-oldDelegate){
返回目标!=oldDelegate.target
||verticalOffset!=oldDelegate.verticalOffset
||PreferLower!=oldDelegate.PreferLower;
}
}
然后用以下内容更新了我的生成器功能:

返回CustomSingleChildLayout(
委托:CustomSingleChildDelegate(目标:rect.bottomCenter,垂直偏移:20,首选以下:true),
孩子:卡片(
child:Text('这是一个amazing产品'),
),
)

AnimatedPositioned
作为布局的子项会导致一个异常。

检查
工具提示。dart
源代码-特别是委托类-它使用
positionDependentBox
函数“将子框放置在容器框中,在目标点上方或下方。”啊,对了!让我检查一下,谢谢你的提示。如果我找到解决方案,我会更新这篇文章。是的,我目前正尝试使用隐式动画,但由于某些原因,动画非常不稳定。不,这很好,但现在我只需要确保为这些浮动UI元素正确设置状态