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,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
相关推荐
互联网搬砖老肖2 小时前
React的单向数据绑定
前端·javascript·react.js
小黄人软件3 小时前
OpenSSL 与 C++ 搭建一个支持 TLS 1.3 的服务器
服务器·开发语言·c++
武昌库里写JAVA4 小时前
Vue3编译器:静态提升原理
java·开发语言·spring boot·学习·课程设计
日晞4 小时前
深浅拷贝?
开发语言·前端·javascript
大模型铲屎官4 小时前
【深度学习-Day 16】梯度下降法 - 如何让模型自动变聪明？
开发语言·人工智能·pytorch·python·深度学习·llm·梯度下降
明月看潮生5 小时前
青少年编程与数学 02-020 C#程序设计基础 05课题、数据类型
开发语言·青少年编程·c#·编程与数学
沐土Arvin5 小时前
性能优化关键:link、script和meta的正确打开方式
开发语言·前端·javascript·设计模式·性能优化·html
zhangfeng11336 小时前
Python 和 matplotlib 保存图像时，确保图像的分辨率和像素符合特定要求（如 64x64）,批量保存 不溢出内存
开发语言·python·matplotlib
leo__5206 小时前
matlab实现激光腔长计算满足热透镜效应
开发语言·matlab
Evand J6 小时前
【MATLAB代码】扩展卡尔曼滤波估计pmsm的位置误差
开发语言·matlab·ekf
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05VMware虚拟机安装Win7专业版保姆级教程（附镜像包）06DeepSeek各版本说明与优缺点分析07深度学习基础--ResNet网络的讲解，ResNet50的复现(pytorch)以及用复现的ResNet50做鸟类图像分类08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Coze扣子平台完整体验和实践（附国内和国际版对比）10【Ubuntu 22.04】解决Ubuntu 22.04终端行距过大的问题