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

Question

在 Card 里面有一列，其中包含 2 个 Flexible widgets (with flex 属性 3,1) 每个包含一个 Container widget 这是代码：

@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')
                      ),
                    )
                )
              ],
            ),
          ),
    );
  }

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

我试图改变合身度：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 中使用时不显示”？：

您需要将 Card 小部件包裹在 SizedBox 或 Container 中 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 宽度。

结果：

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

How to control image size in container?

flutter

flutter-layout

flutter-animation