将图像插入容器 Flutter 应用程序答案

【问题标题】：Inserting image into a container Flutter app将图像插入容器 Flutter 应用程序
【发布时间】：2018-09-06 19:53:09
【问题描述】：

我正在查看我在 startflutter.com 上找到的这个模板，完整代码如下所示

我尝试将自己的图片插入圆圈中，但似乎没有办法让图片完全进入盒子（它总是被裁剪）

@override
      Widget build(BuildContext context) {
        final alucard = Hero(
          tag: 'hero',
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: CircleAvatar(
              radius: 72.0,
              backgroundColor: Colors.transparent,
              backgroundImage: AssetImage('assets/alucard.jpg'),
            ),
          ),
        );

我想在容器中插入图像，像这样

     @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );

但这不起作用并且不会显示，这有什么问题？

这是整个页面的代码...

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';

  @override
  Widget build(BuildContext context) {
    final alucard = Hero(
      tag: 'hero',
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: CircleAvatar(
          radius: 72.0,
          backgroundColor: Colors.transparent,
          backgroundImage: AssetImage('assets/alucard.jpg'),
        ),
      ),
    );

    final welcome = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome Alucard',
        style: TextStyle(fontSize: 28.0, color: Colors.white),
      ),
    );

    final lorem = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit condimentum mauris id ',
        style: TextStyle(fontSize: 16.0, color: Colors.white),
      ),
    );

    final body = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(28.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Colors.blue,
          Colors.lightBlueAccent,
        ]),
      ),
      child: Column(
        children: <Widget>[alucard, welcome, lorem],
      ),
    );

    return Scaffold(
      body: body,
    );
  }
}

【问题讨论】：

增加CircleAvatar 的半径会对您的事业有所帮助吗？
我尝试过保持图像的相同裁剪。
你能多描述一下你想要什么和你实际看到的吗？也许还可以分享您正在使用的图像
我要做的就是在“final welcome”和“final lorem”的文本上方插入一个完整的图像......图像将显示在“CircleAvatar”中类，但是当我尝试使用容器时，它根本不会显示任何内容，并且没有占位符空间。我尝试使用一堆不同的图像来显示它，但它不会......我认为它与图像无关

标签： flutter

【解决方案1】：

用这个改变你的容器会很好

Container(
      height: 120.0,
      width: 120.0,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(
              'assets/assets/alucard.jpg'),
          fit: BoxFit.fill,
        ),
        shape: BoxShape.circle,
      ),
    )

【讨论】：

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

【解决方案2】：

将BoxFit.fill 传递给您的Image.asset 应该可以。

试试这个；

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';

  @override
  Widget build(BuildContext context) {
    final alucard = Hero(
      tag: 'hero',
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: new Container(
          height: 80.0,
          width: 80.0,
          decoration: new BoxDecoration(
            image: DecorationImage(
              image: new AssetImage(
                  'assets/alucard.jpg'),
              fit: BoxFit.fill,
            ),
            borderRadius:
            BorderRadius.circular(80.0),
          ),
        ),
      ),
    );

    final welcome = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome Alucard',
        style: TextStyle(fontSize: 28.0, color: Colors.white),
      ),
    );

    final lorem = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit condimentum mauris id ',
        style: TextStyle(fontSize: 16.0, color: Colors.white),
      ),
    );

    final body = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(28.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Colors.blue,
          Colors.lightBlueAccent,
        ]),
      ),
      child: Column(
        children: <Widget>[alucard, welcome, lorem],
      ),
    );

    return Scaffold(
      body: body,
    );
  }
}

【讨论】：

我收到一条错误消息......参数类型“Image”不能分配给参数类型“ImageProvider”，我不能在 backgroundImage 中使用 Image.asset
我的错。现已编辑。检查。
这对你有用吗？因为我有你在我的问题中写的内容减去填充和边界半径。当我运行你写的那段代码时，我仍然遇到同样的问题。它不会显示图像，也不会在应有的位置留下占位符
带有图片的Container需要一个高度和宽度。
按照@AlbertLardizabal 的建议设置Container 的高度和宽度。我还编辑了设置容器高度和宽度的答案。

【解决方案3】：

试试这个

new Container(
  width: 100.00,
  height: 100.00,
  decoration: new BoxDecoration(
  image: new DecorationImage(
      image: ExactAssetImage('assets/example.png'),
      fit: BoxFit.fitHeight,
      ),
  ));

确保通过编辑 pubspec.yaml 文件 https://docs.flutter.io/flutter/painting/ExactAssetImage-class.html 告诉 Flutter 你的资产文件夹在哪里

【讨论】：

【解决方案4】：

可以将图像添加到容器中 - [your_image_folder_path/image_name]

Container(
    child:  Image(image: AssetImage("images/logo.png")))

【讨论】：

【解决方案5】：

请试试这个：

Container(
    height: _height*0.35,
    width: _width,
    decoration: BoxDecoration(
        image: DecorationImage(
            image: ExactAssetImage('assets/splash_img.jpeg'),
            fit: BoxFit.fitHeight,
        ),
    ),
),

【讨论】：