如何以比例大小和位置将小部件放置在小部件上方

问题描述

我希望将一组小部件按比例放置在背景小部件（图像小部件）上方。

我尝试了以下方法。 创建了一个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),),);
          }));
    }