Flutter Container

一、关于Container嵌套的坑

期望实现效果：

image.png

Container(
      color: Colors.red,
      height: 200,
      width: 200,
      child: Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
    );

但是上述代码实际结果为

image.png
可以看到，子视图完全充满了父视图
这个时候只需要在父视图中添加alignment

Container(
      color: Colors.red,
      height: 200,
      width: 200,
      alignment: Alignment.topLeft,
      child: Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
    );

Flutter 布局（一）- Container详解

二、获取元素的偏移量和尺寸

      GlobalKey _detailHedaerKey = GlobalKey();
      RenderBox renderObject = _detailHedaerKey.currentContext.findRenderObject();
      Offset offset = renderObject.localToGlobal(Offset.zero);
      print("semanticBounds:${renderObject.semanticBounds.size} paintBounds:${renderObject.paintBounds.size} size:${_detailHedaerKey.currentContext.size}");