Flutter图片Image、本地图片、程程图片、圆片剪切、圆形图片

只可远观2025-05-27 13:25

目录

图片组件的介绍

1.Image.network加载图片

[1.1 Image scale图片缩小一倍](#1.1 Image scale图片缩小一倍)

[1.2 Image alignment使用](#1.2 Image alignment使用)

[1.3 Image fit 属性的取值及说明](#1.3 Image fit 属性的取值及说明)

[1.3.1 Contain 默认效果](#1.3.1 Contain 默认效果)

[1.3.2 Fill 图片会缩放至完全填满目标区域（宽高）](#1.3.2 Fill 图片会缩放至完全填满目标区域（宽高）)

[1.3.3 Fill 图片会缩放至完全填满目标区域（宽高）](#1.3.3 Fill 图片会缩放至完全填满目标区域（宽高）)

[1.4 repeat 图片平铺](#1.4 repeat 图片平铺)

[1.4.1 repeatX轴\Y轴都平铺](#1.4.1 repeatX轴\Y轴都平铺)

[1.5. 实现圆角图片](#1.5. 实现圆角图片)

[1.5.1 Container 实现圆角图片](#1.5.1 Container 实现圆角图片)

[1.5.2 Container circular 圆角参数设置](#1.5.2 Container circular 圆角参数设置)

[1.6.1 使用ClipOval使用实现一个圆形图片](#1.6.1 使用ClipOval使用实现一个圆形图片)

2.加载本地图片

[2.1 要在 Flutter 中加载本地图片，需要完成两个主要步骤：](#2.1 要在 Flutter 中加载本地图片，需要完成两个主要步骤：)

[2.1.2 在 项目下创建images资源文件](#2.1.2 在 项目下创建images资源文件)

[2.1.2 在 pubspec.yaml 中配置图片资源路径](#2.1.2 在 pubspec.yaml 中配置图片资源路径)

[2.1.3 使用 Image.asset 或 Image 组件加载图片](#2.1.3 使用 Image.asset 或 Image 组件加载图片)

图片组件的介绍

1.Image.network加载图片

复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text("sss")), body: MyApp2()),
    ),
  );
}

class MyApp2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
        ),
      ),
    );
  }
}

1.1 Image scale图片缩小一倍

复制代码 
class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          scale: 2, //图片缩小
        ),
      ),
    );
  }
}

1.2 Image alignment使用

复制代码 
class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          scale: 2,//缩放
          alignment: Alignment.centerLeft,//位置
        ),
      ),
    );
  }
}

或者修改Container位置

class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.centerLeft, //位置
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
        ),
      ),
    );
  }
}

1.3 Image fit 属性的取值及说明

属性名 作用描述
BoxFit.fill - 强制图片填满整个容器（宽高均与容器一致）。 - 可能导致图片变形（宽高比被忽略）。
BoxFit.contain - 图片按原比例缩放，完全包含在容器内（宽或高中至少一边与容器边缘对齐）。 - 可能在另一边留有空白。
BoxFit.cover - 图片按原比例缩放，覆盖整个容器（宽和高均不小于容器）。 - 超出容器的部分会被裁剪。
BoxFit.fitWidth - 图片宽度与容器宽度一致，高度按比例缩放。 - 可能超出容器高度或留有空白。
BoxFit.fitHeight - 图片高度与容器高度一致，宽度按比例缩放。 - 可能超出容器宽度或留有空白。
BoxFit.none - 图片按原始尺寸显示，不进行任何缩放。 - 若图片尺寸大于容器，会被截断显示。
BoxFit.scaleDown - 类似于 contain，但只在图片尺寸大于容器时缩小，不会放大图片。 - 保持原图清晰度，避免低分辨率图片拉伸模糊。
1.3.1 Contain 默认效果
复制代码 
class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.centerRight, //位置
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          // scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
          fit: BoxFit.contain, //图片fit属性 = 默认
        ),
      ),
    );
  }
}
1.3.2 Fill 图片会缩放至完全填满目标区域（宽高）
1.3.3 Fill 图片会缩放至完全填满目标区域（宽高）
复制代码 
class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.centerRight, //位置
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          // scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
          fit: BoxFit.fitWidth, //图片fit属性= 宽度充满
        ),
      ),
    );
  }
}

1.4 repeat 图片平铺

复制代码 
class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.centerRight, //位置
        height: 300,
        width: 500,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          // scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
          // fit: BoxFit.fitWidth, //图片fit属性= 宽度充满
          repeat: ImageRepeat.repeatX, //X轴平铺
        ),
      ),
    );
  }
}
1.4.1 repeatX轴\Y轴都平铺
复制代码 
class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.centerRight, //位置
        height: 300,
        width: 500,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          // scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
          // fit: BoxFit.fitWidth, //图片fit属性= 宽度充满
          repeat: ImageRepeat.repeat, //X轴\Y轴都平铺
        ),
      ),
    );
  }
}

1.5. 实现圆角图片

1.5.1 Container 实现圆角图片

复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("sss")),
        body: Column(children: [MyApp2(), SizedBox(height: 20), Circular()]),
      ),
    ),
  );
}

class MyApp2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.centerRight, //位置
        height: 300,
        width: 300,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          // scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
          // fit: BoxFit.fitWidth, //图片fit属性= 宽度充满
          repeat: ImageRepeat.repeat, //X轴\Y轴都平铺
        ),
      ),
    );
  }
}

//实现一个圆形图片
class Circular extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
      height: 300,
      width: 300,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
          image: NetworkImage(
            "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          ),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

1.5.2 Container circular 圆角参数设置

复制代码 
borderRadius: BorderRadius.circular(10)//圆角

1.6.1 使用ClipOval使用实现一个圆形图片

复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("sss")),
        body: Column(
          children: [
            MyApp2(),
            SizedBox(height: 20),
            Circular(),
            SizedBox(height: 30),
            ClipImage(),
          ],
        ),
      ),
    ),
  );
}

class MyApp2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.centerRight, //位置
        height: 150,
        width: 150,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          // scale: 2,//缩放
          // alignment: Alignment.centerLeft, //位置
          // fit: BoxFit.fitWidth, //图片fit属性= 宽度充满
          repeat: ImageRepeat.repeat, //X轴\Y轴都平铺
        ),
      ),
    );
  }
}

//实现一个圆形图片
class Circular extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
      height: 150,
      width: 150,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(10),
        image: DecorationImage(
          image: NetworkImage(
            "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
          ),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

//使用ClipOval使用实现一个圆形图片
class ClipImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}
复制代码 
//使用ClipOval使用实现一个圆形图片
class ClipImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://img2.baidu.com/it/u=1069891123,3492077884&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=456",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

2.加载本地图片

2.1 要在 Flutter 中加载本地图片，需要完成两个主要步骤：

2.1.2 在 项目下创建images资源文件
2.1.2 在 pubspec.yaml 中配置图片资源路径
2.1.3 使用 Image.asset 或 Image 组件加载图片
复制代码 
//加载一个本地图片
class LocalImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      child: Image.asset("images/a.png"),
    );
  }
}
复制代码 
class LocalImage extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('本地圆形图片加载示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用CircleAvatar加载圆形图片
              CircleAvatar(
                radius: 100,
                backgroundImage: AssetImage('images/profile.png'),
              ),
              const SizedBox(height: 30),
              // 使用ClipOval自定义圆形图片
              ClipOval(
                child: Image.asset(
                  'images/background.jpg',
                  width: 200,
                  height: 200,
                  fit: BoxFit.cover,
                ),
              ),
              const SizedBox(height: 30),
              // 使用Container的decoration属性
              Container(
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: AssetImage('images/icon.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
相关推荐
大明者省15 分钟前
pycharm2020.2版本给项目选择了虚拟环境解释器，项目文件都运行正常，为什么terminal文件路径的前面没有虚拟解释器的名称
开发语言·python
江南199718 分钟前
JavaScript深入学习系列----函数篇上
javascript
独立开阀者_FwtCoder25 分钟前
三行CSS代码把网页像素化
前端·javascript·github
安心不心安38 分钟前
React状态管理——redux-saga异步操作
前端·javascript·react.js
岸边的风44 分钟前
JavaScript篇：【前端必备】数组方法大全：从‘会写’到‘玩出花’，你掌握几个？
开发语言·前端·javascript
HoroMin1 小时前
在Spring Boot中自定义JSON返回日期格式的指南
java·开发语言·spring boot·注解
汪洪墩1 小时前
使用Mars3d加载热力图的时候，出现阴影碎片
开发语言·前端·javascript·vue.js·cesium
木木黄木木1 小时前
使用Three.js创建炫酷的3D玻璃质感动态效果
开发语言·javascript·3d
weixin_ab1 小时前
Uniapp 中根据不同离开页面方式处理 `onHide` 的方法
javascript·uni-app
半碗水1 小时前
修·洞（JS）
javascript·css
热门推荐
01扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解02Coze扣子平台完整体验和实践（附国内和国际版对比）03KGG转MP3工具|非KGM文件|解密音频04AI Agent | Coze 插件使用指南：从功能解析到实操步骤05DeepSeek各版本说明与优缺点分析06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07字节跳动“扣子空间”AI智能体全解析08零代码入门 | Coze——让大模型接入自己的数据库09YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】10免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）