Flutter开发（四）——Image Widget控件

关注

原创最新推荐文章于 2026-08-31 10:37:48 发布 453 阅读 AI 写同款· GEO 优化 ›

Flutter快速上车之Widget Flutter作为一种全新的响应式，跨平台，高性能的移动开发框架。从开源以来，已经得到越来越多开发者的喜爱。闲鱼是最早一批与谷歌展开合作，并在重要的商品详情页中使用上线的公司。一路走来，积累了大量的开发经验。虽然越来越多的技术大牛在flutter世界中弄得风声水起，但是肯定有很多的flutter小白希望能快速上手，享受flutter编程的乐趣。本文就是面向刚刚踏上futter的同学，从Flutte... 阅读详情

Image

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(
          title: Text("AppBar Hello")
        ),
        body: Center(
          child: new Image.network(
            "https://profile.csdnimg.cn/2/0/1/1_redkeyer",  //图片Url地址
            width: 100, //图片宽度
            height: 850,  //图片高度
            // fit: BoxFit.fitHeight,  //以高度优先，图片缩小
            fit: BoxFit.fitWidth, //以宽度优先，图片缩小
            // fit: BoxFit.fill,   //填充，图像变形
            // fit: BoxFit.cover, //图片不变形，裁剪填充
            // fit: BoxFit.scaleDown, //图片不变形

            // repeat: ImageRepeat.repeatY,  //有容器包裹时生效

            // 图片混合模式 color 和 colorBlendMode 一起使用,可以使图片偏向某种颜色或效果
            color: Color.fromARGB(100, 100, 200, 100),
            colorBlendMode: BlendMode.hardLight //模式太多了
          )
          
        ),
      ),

    );
  }
}

效果展示：（网络图片）
在这里插入图片描述

//----------------------------------------------------
上面展示的Image的一些属性和加载网络图片。Flutter加载本地图片，需要进行下配置，以下进行介绍：
1、在项目根目录创建文件夹 image_resorl(这里命名随便，一般写作images)，并将要展示的图片拷贝到这个文件夹；
2、在项目根目录打开文件 flutter_app.iml，并在其中添加本地图片路径：

  assets:
    - image_resorl/wangciwang.jpeg

在这里插入图片描述
3、代码中用 Image.asset（‘本地图片路径’），展示本地图片。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(title: Text("AppBar Hello")),
        body: Center(
          child: new Image.asset(
            'image_resorl/wangciwang.jpeg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}