为什么 Image 小部件不能在指定宽度和高度的容器中设置特殊宽度和高度？答案

【问题标题】：Why the Image widget can not set special width and height in the Container with specified width and height?为什么 Image 小部件不能在指定宽度和高度的容器中设置特殊宽度和高度？
【发布时间】：2020-01-18 13:01:16
【问题描述】：

为什么Image widget不能在指定宽高的Container中设置特殊的宽高？

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network(
          "http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg",
          width: 20,
          height: 20,
        ),
        width: 400,
        height: 400,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

结果是这样的，你看到Container中的Image占据了400.0的宽度，而不是20。

EDIT-01

我尝试使用MediaQuery设置Image的宽高，但没有效果。

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network(
          "http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg",
          width: MediaQuery.of(context).size.height/2,
          height: MediaQuery.of(context).size.height/2,
        ),
        width: 400,
        height: 400,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

使用媒体查询height和Width

height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,

并像这样实现

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network(
          "http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg",
          width: width,
          height: height,
        ),
        width: 400,
        height: 400,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

【讨论】：

我不明白你的意思。我无法为图像小部件设置指定的宽度？
@244boy 您可以通过计算其大小来添加或除以大小，或者如果您希望大小与容器相同，那么看看我更新了我的代码
在这种情况下，context 是否代表Container ？
显然只是将 MediaQuery 的高度和宽度放入构建方法中

【解决方案2】：

你应该先设置容器的常量：

比如设置alignment。

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network(
          "http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg",
          width: 20,
          height:20,
        ),
        width: 400,
        height: 400,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        alignment: Alignment.center,
      ),
    );
  }
}

【讨论】：

【解决方案3】：

Container上的宽高设置了child的width和height约束，此时child上的width和height无能为力。所以你可以再拿一个小部件并将图像放在其中。例如我可以使用Center。

Container(
        child: Center(
          child: Image.network(
            "http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg",
            width: 20,
            height: 20,
          ),
        ),
        width: 400,
        height: 400,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      )

它会按预期正常工作

【讨论】：