如何解决如何以比例大小和位置将小部件放置在小部件上方
我希望将一组小部件按比例放置在背景小部件(图像小部件)上方。
我尝试了以下方法。
创建了一个Widget
数组并将其添加到Stack
中,使用LayoutBuilder
来构建子窗口小部件,并使用Positioned
小部件对其进行定位。
但是由于Incorrect use of ParentDataWidget.
错误而无法正常工作。
Widget build(BuildContext context) {
final _widgetStack = <Widget>[];
_widgetStack.add(Container(
child: Image.network(
'https://nikhileshwar96.github.io/Showcase/blue.jpg'),color: Color.fromARGB(255,255,255),));
for (int _i = 1; _i < 5; _i++) {
_widgetStack.add(LayoutBuilder(
builder: (context,constrain) => Positioned(
top: constrain.maxWidth * 0.5,left: constrain.maxHeight * 0.5,width: constrain.maxWidth * 0.25,height: constrain.maxHeight * 0.25,child: Container(
child: Text('HiTHERE'),0),),)));
}
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("Hi there"),body:
Container(
height: 500,child: Stack(
children: _widgetStack,)
),);
}
解决方法
尝试:
child: CustomMultiChildLayout(
delegate: FooDelegate([
Rect.fromLTWH(0,1,1),Rect.fromLTWH(0.1,0.1,0.2,0.05),Rect.fromLTWH(0.5,]),children: [
LayoutId(id: 0,child: Container(color: Colors.grey)),LayoutId(id: 1,child: Material(color: Colors.red,child: InkWell(onTap: () {},))),LayoutId(id: 2,child: Material(color: Colors.blue,],)
自定义MultiChildLayoutDelegate
可能看起来像(但是完全取决于您如何实现委托):
class FooDelegate extends MultiChildLayoutDelegate {
final List<Rect> rects;
FooDelegate(this.rects);
@override
void performLayout(Size size) {
var id = 0;
for (var rect in rects) {
var childRect = Rect.fromLTWH(
size.width * rect.left,size.height * rect.top,size.width * rect.width,size.height * rect.height);
print('$childRect $size');
positionChild(id,childRect.topLeft);
layoutChild(id,BoxConstraints.tight(childRect.size));
id++;
}
}
@override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => true;
}
,
根据文档here:
Positioned小部件必须是Stack的后代,并且路径必须是 封闭堆栈中的定位小部件必须仅包含 StatelessWidgets或StatefulWidgets(不是其他类型的小部件,例如 RenderObjectWidgets)。
要解决您的问题,请执行以下操作:
您可以使用Transform
小部件的Transform.translate
构造函数来代替Positioned
小部件。因此,您的代码如下所示:
for (int _i = 1; _i < 5; _i++) {
_widgetStack.add(LayoutBuilder(
builder: (context,constrain) {
return Transform.translate(
offset: Offset(constrain.maxWidth * 0.5,constrain.maxHeight * 0.5),child: Container(
width: constrain.maxWidth * 0.25,height: constrain.maxHeight * 0.25,child: Text('HiTHERE'),color: Color.fromARGB(255,255,0),),);
}));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。