flutter 设置背景图片

不念不忘少年蓝@ 2022-12-22 08:44 197阅读 0赞

### 设置背景图片 ###

做移动开始的朋友都知道项目中很多时候要用到用图片做背景，当然flutter也可以设置背景图片。  
具体代码如下：

class BackgroundImgDemo extends StatelessWidget {
      const BackgroundImgDemo({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          decoration: BoxDecoration(
            image: new DecorationImage(
              fit: BoxFit.cover,
              image: new NetworkImage(
                  'https://randomuser.me/api/portraits/men/43.jpg'),
            ),
          ),
          child: Container(
            color: Colors.red.withOpacity(.5),
            child: Center(
              child: Text(
                "我在图片的上面哦~",
                style: TextStyle(color: Colors.white, fontSize: 33),
              ),
            ),
          ),
        );
      }
    }

运行效果如下：

![b46101b6fe4e7a0147d27077cb0913f2.webp][]

作者：Victory\_886  
链接：https://www.jianshu.com/p/300906739488  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[b46101b6fe4e7a0147d27077cb0913f2.webp]: /images/20221120/0d536212025148b584f3f1dc644c16a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 flutter 设置背景图片

设置背景图片做移动开始的朋友都知道项目中很多时候要用到用图片做背景，当然flutter也可以设置背景图片。具体代码如下： class Backgr

不念不忘少年蓝@/ 2022年12月22日 08:44/ 0 赞/ 198 阅读

相关 treewidget设置背景图片

//::item表示QTreeWidget的item //所有的QTreeWidget this->setStyleSheet("QTr

男娘i/ 2022年08月03日 00:09/ 0 赞/ 295 阅读

相关 MFC设置背景图片

我创建的是基于对话框的MFC程序，父类是CDialogEx类一句就搞定了 CDialogEx::SetBackgroundImage(IDB_BITMA

素颜马尾好姑娘i/ 2022年08月02日 14:52/ 0 赞/ 298 阅读

相关 Qt 设置背景图片

1. QLabel QPixmap pixmap("background.png"); setPixmap(pixmap);

逃离我推掉我的手/ 2022年05月26日 07:39/ 0 赞/ 372 阅读

相关 IDEA设置背景图片

来先看看效果啊 ![70][] 漂亮嘛! 是美女当然漂亮咯! 怎么设置呢? 下面来教大家! 1.先下载安装Background Image Plus

痛定思痛。/ 2022年05月17日 10:59/ 0 赞/ 360 阅读

相关 Android 设置背景图片

使用代码的方式如下： LinearLayout temp=(LinearLayout)findViewById(R.id.LinearLayout

r囧r小猫/ 2022年05月15日 01:19/ 0 赞/ 352 阅读

相关 Pycharm设置背景图片

打开Pycharm点击左上角File如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

╰半橙微兮°/ 2021年12月17日 11:55/ 0 赞/ 418 阅读

相关背景图片设置属性

background-size有3个属性： auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片

心已赠人/ 2021年09月19日 03:06/ 0 赞/ 530 阅读

相关 flutter 背景图片毛玻璃效果

1、引入图片滤镜文件 import 'dart:ui'; 2、在Stack组件中堆叠，产生图标毛玻璃效果若不使用图片毛玻璃

╰+攻爆jí腚メ/ 2021年07月24日 11:44/ 0 赞/ 625 阅读

相关 Flutter Contaner设置图片为背景，解决图片不能铺满的情况

一开始实现的效果图：在这里插入图片描述图片总是铺不满，以为是stack嵌套的问题，又以为是container的其他问题，即使Image.asse中设置了fit: Bo...

清疚/ 2021年06月30日 09:48/ 0 赞/ 981 阅读