Futter全屏显示图像，获取偏移量和比例系数。

Question

我想在平板电脑上全屏显示一张图片，并获得图片的新尺寸和比例系数。

为了在图像上显示额外的信息，需要比例系数和新尺寸。我想显示标记和其他辅助工具，比如截图。

Stack(
  children: <Widget>[
    Center(
      child: Image.network(
        'https://i.ebayimg.com/images/g/jmwAAOxy3NBSpNvN/s-l1600.jpg',
        fit: BoxFit.contain,
      ),
    ),
  ]
)

Answer 1

你可以使用一个组合 Stack, a Positioned.fill 和a LayoutBuilder 来获取图像的宽度和高度，然后据此定位你的孩子。宽度高度应该足以决定你与原尺寸比较时的比例系数。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[
            Image.network(
              'https://i.ebayimg.com/images/g/jmwAAOxy3NBSpNvN/s-l1600.jpg',
              fit: BoxFit.contain,
            ),
            Positioned.fill(
              child: Container(
                color: Colors.blue.withOpacity(0.2),
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    // Do whatever you want here
                    return Text(constraints.toString());
                  }
                ),
              ),
            ),
          ]
        ),
      ),
    );
  }

https:/codepen.iokuhnroyalpenXWmGrdo