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

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

Answer 2

根据文档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, 0),
            ),
          );
          }));
    }

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

2 个答案: