如何控制容器中的图像大小？

Question

在卡片内有一列，其中包含 2 个灵活小部件（具有 flex 属性 3,1），每个小部件都包含一个容器小部件 这是代码：

@override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Card(
            child: Column(
              children: [
                Flexible(
                  flex: 3,
                  child: Container(
                    color: Colors.red,
                  )
                  ),

                Flexible(
                  flex: 1,
                    child: Container(
                      color: Colors.amber,
                      child: Center(child: Text('Request')
                      ),
                    )
                )
              ],
            ),
          ),
    );

这段代码给我下面的屏幕：

现在我想放置图像以覆盖所有红色区域，

 @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Card(
            child: Column(
              children: [
                Flexible(
                  flex: 3,
                   child: Container(
                    color: Colors.red,
                    child: Image.network(
                      'https://placeimg.com/640/480/any', fit: BoxFit.cover,)
                  )
                  ),

                Flexible(
                  flex: 1,
                    child: Container(
                      color: Colors.amber,
                      child: Center(child: Text('Request')
                      ),
                    )
                )
              ],
            ),
          ),
    );
  }

但是当在容器中添加图像时会发生这种情况

我尝试更改适合：BoxFit.cover，但没有任何反应

如何在不改变容器大小的情况下使图像覆盖容器（红色区域）？

添加行和其他列

 Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Card(
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),

                    Flexible(
                      flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                                text: TextSpan(
                                  text: 'Request a service',
                                  style: TextStyle(
                                    fontSize: 20,
                                    color: Colors.black
                                  )
                                ),
                          )
                          ),
                        )
                    )
                  ],
                ),
              ),
              Card(
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),

                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                                text: TextSpan(
                                    text: 'Request a service',
                                    style: TextStyle(
                                        fontSize: 20,
                                        color: Colors.black
                                    )
                                ),
                              )
                          ),
                        )
                    )
                  ],
                ),
              ),
            ],
          ),
    );
  }

Answer 1

使用Container 的decoration 属性来代替Image：

          Flexible(
                flex: 3,
                child: Container(
                  // use the decoration property
                  decoration: BoxDecoration(
                    color: Colors.red,
                    // image here
                    image: DecorationImage(
                      image: NetworkImage(
                        'https://placeimg.com/640/480/any',
                      ),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),

结果：

编辑：“为什么我的图片在Row 中使用时没有显示？”：

您需要通过包装SizedBox 或Container 为您的Card 小部件提供Width。

以您的代码为例添加了一个演示：

class Help extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              width: 150, // give width here
              child: Card(
                child: Column(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                            text: TextSpan(
                                text: 'Request a service',
                                style: TextStyle(
                                    fontSize: 20, color: Colors.black)),
                          )),
                        ))
                  ],
                ),
              ),
            ),
            SizedBox(
              width: 150, // give width here
              child: Card(
                child: Column(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                            text: TextSpan(
                                text: 'Request a service',
                                style: TextStyle(
                                    fontSize: 20, color: Colors.black)),
                          )),
                        ))
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意：建议为Card 指定基于设备屏幕的宽度。

结果：