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

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

根据文档here：

定位小部件必须是堆栈的后代，并且路径从 定位到其封闭堆栈的小部件必须仅包含 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, 0),
            ),
          );
          }));
    }

Answer 2

尝试：

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 可能看起来像（但是如何实现委托完全取决于您）：

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