flutter - 如何将小部件放置在具有成比例大小和位置的小部件上方

Question

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

我尝试了以下。
创建了 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, 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'),
                  color: Color.fromARGB(255, 255, 0, 0),
                ),
              )));
    }

    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Hi there"),
        ),
        body: 
          Container(
            height: 500,
            child: Stack(
              children: _widgetStack,
            ),
          )
      ),
    );
  }

Answer 1

尝试:

child: CustomMultiChildLayout(
  delegate: FooDelegate([
    Rect.fromLTWH(0, 0, 1, 1),
    Rect.fromLTWH(0.1, 0.1, 0.2, 0.05),
    Rect.fromLTWH(0.5, 0.1, 0.2, 0.05),
  ]),
  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, child: InkWell(onTap: () {},))),
  ],
)

定制MultiChildLayoutDelegate可能看起来像(但是如何实现委托(delegate)完全取决于您):

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;
}