Flutter如何处理框内固定大小的图像？答案

【问题标题】：Flutter how to handle image with fixed size inside box?Flutter如何处理框内固定大小的图像？
【发布时间】：2019-07-20 00:26:31
【问题描述】：

我是 Flutter 的新手，我喜欢它，但我不习惯构建布局。

我正在开发一个包含卡片 ListView 的应用程序。每张卡片都在一个容器内，包含一个图像（具有固定的高度和宽度）和一个文本。

我无法将图像正确放入卡片中。我希望图像覆盖框的宽度。谢谢。

这是代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'MyApp';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: <Widget>[
              Container(
                    margin:EdgeInsets.all(8.0),
                    child: Card(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
                        child: InkWell(
                           onTap: () => print("ciao"),     
                           child: Column(
                                children: <Widget>[
                                    ClipRRect(
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(8.0),
                                        topRight: Radius.circular(8.0),
                                      ),
                                      child: Image.asset(
                                        'img/britannia.jpg',
                                        width: 300,
                                        height: 150,
                                        fit:BoxFit.fill  

                                      ),
                                    ),
                                    ListTile(
                                      title: Text('Pub 1'),
                                      subtitle: Text('Location 1'),
                                    ),
                                ],
                           ),
                        ),
                    ),
              ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

Each card has a fixed size - 固定大小是多少？
每个容器必须（例如）150 高。我想要的是根据容器的高度缩放图像（容器包含卡片）。尽管源图像尺寸，我希望像第一张图片一样显示图像。
您是否尝试过使用扩展类？ docs.flutter.io/flutter/widgets/Expanded-class.html
我已经更新了代码和图片。我必须将 Image 小部件或 ClipRRect 小部件包装在 Expanded 内？
如何在flutter中将小图像放入大容器中？请建议。谢谢。

标签： image layout flutter containers

【解决方案1】：

如果使用 fit 属性可行，我让这张非常清晰的备忘单（章节 fit 属性）详细说明所有内容：https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20

【讨论】：

你想适应 witdh 吗？那么fitWidth 应该可以解决问题，不是吗？？
但是你为什么要给你的图片加上高度和宽度呢？那你就不会有欲望效果了……你应该给你定义高度card小部件

【解决方案2】：

您需要在Column 中添加-crossAxisAlignment: CrossAxisAlignment.stretch,，以便孩子们可以占用水平空间。

工作代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'MyApp';

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: ListView(
      children: <Widget>[
        Container(
          margin:EdgeInsets.all(8.0),
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: InkWell(
              onTap: () => print("ciao"),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,  // add this
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                    child: Image.network(
                        'https://placeimg.com/640/480/any',
                       // width: 300,
                        height: 150,
                        fit:BoxFit.fill

                    ),
                  ),
                  ListTile(
                    title: Text('Pub 1'),
                    subtitle: Text('Location 1'),
                  ),
                ],
              ),
            ),
          ),
        ),
        Container(
          margin:EdgeInsets.all(8.0),
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: InkWell(
              onTap: () => print("ciao"),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                    child: Image.network(
                        'https://placeimg.com/640/480/any',
                        // width: 300,
                        height: 150,
                        fit:BoxFit.fill

                    ),
                  ),
                  ListTile(
                    title: Text('Pub 1'),
                    subtitle: Text('Location 1'),
                  ),
                ],
              ),
            ),
          ),
        ),
        Container(
          margin:EdgeInsets.all(8.0),
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: InkWell(
              onTap: () => print("ciao"),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                    child: Image.network(
                        'https://placeimg.com/640/480/any',
                        // width: 300,
                        height: 150,
                        fit:BoxFit.fill

                    ),
                  ),
                  ListTile(
                    title: Text('Pub 1'),
                    subtitle: Text('Location 1'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
      ),
    );
  }
}

输出：

【讨论】：

如何在flutter中将小图像放入大容器中？请建议。谢谢。

【解决方案3】：

这对我有用

Image.network(imageUrl, fit: BoxFit.fitWidth,),

【讨论】：

【解决方案4】：

我用过这个并且和我一起工作得很好！

  Container(
                    width: MediaQuery.of(context).size.width,
                    height: 175,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(YOUTUBE_THUMBNAIL_PART_ONE +
                            video.key +
                            YOUTUBE_THUMBNAIL_PART_TWO),
                      ),
                    )),

【讨论】：

【解决方案5】：

我有同样的问题，我只是在 Image.asset 类中添加了 fit:BoxFit.fill 在使用 MediaQuery 类获取屏幕宽度后**

    Container(
              child:Image.asset(link,fit: BoxFit.fill,)
              width: screensize.width,
              height: 150,
            ))

【讨论】：

Container 小部件中没有 fit 属性
@KirillKarmazin 我刚刚注意到我犯的错误。我编辑了我的答案，现在应该可以了。感谢您的关注。

【解决方案6】：

我不知道怎么做.. 但这确实可以在容器中保持固定大小的图像只需在容器中添加对齐方式

    Container(
      height: double.infinity,
      alignment: Alignment.center, // This is needed
      child: Image.asset(
        Constants.ASSETS_IMAGES + "logo.png",
        fit: BoxFit.contain,
        width: 300,
      ),
    );

【讨论】：

对齐也奇怪地解决了我的问题

【解决方案7】：

您想要做的可能是使用较大容器的大小。在这种情况下，您的媒体应该占据整个专用空间：

return Container(
      alignment: Alignment.center,
      height: double.infinity,
      width: double.infinity,
      child: Image.asset(
        '', //TODO fill path
        height: double.infinity,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
    );

您可以使用fit 值：

BoxFit.cover 会覆盖整个容器
BoxFit.fitWidth 将适合宽度并最终放置水平白条来填充空间
BoxFit.fitHeight 将适合高度并最终放置垂直的白条来填充空间

【讨论】：

【解决方案8】：

 Image.asset(
                  'assets/images/desert.jpg',
                  height: 150,
                  width: MediaQuery.of(context).size.width,
                  fit:BoxFit.cover

              )

【讨论】：

【解决方案9】：

您只需要Image 类的fit 属性：

Image.asset(
  'your_image_asset',
  fit: BoxFit.fill, // Expands to fill parent (changes aspect ratio)
)

或

Image.asset(
  'your_image_asset',
  fit: BoxFit.cover, // Zooms the image (maintains aspect ratio)
)

【讨论】：

【解决方案10】：

child: Container(
              alignment: Alignment.center,// use aligment
              child: Image.asset(
                'assets/images/call.png',
                height: 45,
                width: 45,
                fit: BoxFit.cover,
              ),
            ),

如果你想带边框，可以使用它

            Center(
          child: Container(
            margin: EdgeInsets.only(top: 75),
            width: 120,
            height: 120,
            alignment: Alignment.center,
            child: Image.asset(
              "assets/images/call.png",
              fit: BoxFit.cover,
              height: 45,
              width: 45,
            ),
            decoration: new BoxDecoration(
              color: Colors.white,
              borderRadius: new BorderRadius.all(new Radius.circular(120)),
              border: new Border.all(
                color: Colors.blue,
                width: 4.0,
              ),
            ),
          ),
        )

【讨论】：

【解决方案11】：

将 Image 小部件放入容器中，并为容器提供对齐中心，并为图像提供特定的宽度-高度。

return Container(
      alignment: Alignment.center,// use aligment
      color: Color.fromRGBO(0, 96, 91, 1.0),
      child: Image.asset('assets/images/splash_logo.png',
        height: 150,
        width: 150,
      fit: BoxFit.cover),
    );

【讨论】：