【Flutter】图片组件Image&图标组件Icon

最新推荐文章于 2024-10-19 16:35:50 发布

程序喵正在路上

最新推荐文章于 2024-10-19 16:35:50 发布

阅读量2.1k

点赞数 30

分类专栏： Flutter学习文章标签： flutter dart

本文链接：https://blog.csdn.net/weixin_62511863/article/details/139159974

版权

Flutter学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

🔥 本文由程序喵正在路上原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月24日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

图片组件

组件介绍

在 Flutter 中，我们可以通过 Image 组件来加载并显示图，Image 的数据源可以是 asset、文件、内存以及网络。

下面我们主要讲解两个内容：

Image.asset：本地图片
Image.network：远程图片

Image 组件的常用属性:

名称	类型	说明
alignment	Alignment	图片的对齐方式
color 和 colorBlendMode		设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合
fit	BoxFit	用来控制图片的拉伸和挤压，这都是根据父容器来的。`BoxFit.fill`：全图显示，图片会被拉伸并充满父容器；`BoxFit.contain`：全图显示，显示原比例，可能会有空隙；`BoxFit.cover`（最常用）：显示可能拉伸或裁切，图片会充满整个容器，但不变形；`BoxFit.fitWidth`：横向充满，显示可能拉伸或裁切；`BoxFit.fitHeight`：纵向充满，显示可能拉伸或裁切；`BoxFit.saleDown`：效果和 contain 差不多，但是此属性不允许显示超过原图片大小
repeat	平铺	`ImageRepeat.repeat`：横向和纵向都进行重复，直到铺满整个画布；`ImageRepeat.repeatX`：横向重复；`ImageRepeat.repeatY`：纵向重复
width		宽度，一般结合 `ClipOval` 才能看到效果
height		高度，一般结合 `ClipOval` 才能看到效果

加载远程图片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("加载远程图片")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 160,
        decoration: const BoxDecoration(color: Colors.lightBlue),
        child: Image.network(
          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/a721aa24-c1f8-4988-b6f8-73f8edaef42b.png",
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

在这里插入图片描述

Container实现圆形图片

圆形图片在实际中很常用，比如我们的头像

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("Container实现圆形图片")),
        body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
            color: Colors.lightBlue,
            borderRadius: BorderRadius.circular(100),
            image: const DecorationImage(
                //使用远程图片
                image: NetworkImage(
                  "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/a721aa24-c1f8-4988-b6f8-73f8edaef42b.png",
                ),
                fit: BoxFit.cover)),
      ),
    );
  }
}

在这里插入图片描述

ClipOval实现圆形图片

在 Flutter 中，ClipOval 是一个用于将子组件剪裁为椭圆形的组件。通过 ClipOval，你可以将任意形状的子组件剪裁为椭圆形，从而创建椭圆形的视觉效果。

ClipOval 组件非常适合用于展示圆形或椭圆形的内容，比如头像、图标等。它可以让你在布局中轻松地实现各种椭圆形的视图。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("圆形图片")),
          //Column: 垂直排列子组件的布局组件
          body: const Column(children: [
            MyApp(),
            //用一个盒子来隔开两张图片
            SizedBox(
              height: 20,
            ),
            ClipOvalImage()
          ]))));
}

//Container实现圆形图片
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
            color: Colors.lightBlue,
            borderRadius: BorderRadius.circular(100),
            image: const DecorationImage(
                //使用远程图片
                image: NetworkImage(
                  "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/a721aa24-c1f8-4988-b6f8-73f8edaef42b.png",
                ),
                fit: BoxFit.cover)),
      ),
    );
  }
}

//ClipOval实现圆形图片
class ClipOvalImage extends StatelessWidget {
  const ClipOvalImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ClipOval(
      child: Image.network(
        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/512aff8e-8374-4740-879a-74b617f2cb6c.jpg",
        width: 200,
        height: 200,
        fit: BoxFit.cover,
      ),
    ));
  }
}

在这里插入图片描述

CircleAvatar实现圆形图片

在 Flutter 中，CircleAvatar 是一个用于显示圆形头像的组件。它提供了一个简单而方便的方式来展示用户头像或者其他圆形图片。

CircleAvatar 组件自带了一些常见的样式设置，例如背景颜色、边框宽度和颜色等，同时也可以很容易地指定头像的来源，比如网络图片、本地图片或者图标。

基本上，CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("圆形图片")),
          //Column: 垂直排列子组件的布局组件
          body: const Column(children: [
            MyApp(),
            //用一个盒子来隔开两张图片
            SizedBox(height: 20),
            ClipOvalImage(),
            SizedBox(height: 20),
            CircleAvatarImage()
          ]))));
}

//Container实现圆形图片
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
            color: Colors.lightBlue,
            borderRadius: BorderRadius.circular(100),
            image: const DecorationImage(
                //使用远程图片
                image: NetworkImage(
                  "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/a721aa24-c1f8-4988-b6f8-73f8edaef42b.png",
                ),
                fit: BoxFit.cover)),
      ),
    );
  }
}

//ClipOval实现圆形图片
class ClipOvalImage extends StatelessWidget {
  const ClipOvalImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ClipOval(
      child: Image.network(
        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/512aff8e-8374-4740-879a-74b617f2cb6c.jpg",
        width: 200,
        height: 200,
        fit: BoxFit.cover,
      ),
    ));
  }
}

//CircleAvatar实现圆形图片
class CircleAvatarImage extends StatelessWidget {
  const CircleAvatarImage({super.key});

  @override
  Widget build(BuildContext context) {
    return const CircleAvatar(
        radius: 105,
        backgroundColor: Colors.lightBlue,
        child: CircleAvatar(
          radius: 100,
          backgroundImage: NetworkImage(
              "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/20240326135455.jpg"),
        ));
  }
}

在这里插入图片描述

加载本地图片

项目根目录新建 images 文件夹，在 images 中新建 2.0x、3.0x 对应的文件夹，然后将一张图片分别放进这三个文件夹中：
打开 pubspec.yaml，找到声明本地图片的地方，声明一下添加的图片文件，注意格式

使用本地图片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    appBar: AppBar(title: const Text("加载本地图片")),
    body: const MyApp(),
  )));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 150,
        backgroundColor: Colors.white,
        backgroundImage: const AssetImage('images/1.jpeg'),
        foregroundColor: Colors.blue,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.blue, width: 3),
            boxShadow: [
              BoxShadow(
                color: Colors.blue.withOpacity(0.3),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

图标组件

使用Flutter官方Icons图标

直接使用 Icon 组件即可

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    appBar: AppBar(title: const Text("官方Icons图标")),
    body: const MyApp(),
  )));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Column(
      children: [
        Icon(Icons.search, color: Colors.red, size: 40),
        SizedBox(height: 10),
        Icon(Icons.home),
        SizedBox(height: 10),
        Icon(Icons.category),
        SizedBox(height: 10),
        Icon(Icons.shop),
        SizedBox(height: 10),
      ],
    ));
  }
}

在这里插入图片描述

借助阿里巴巴图标库自定义字体图标

我们也可以使用自定义的字体图标，阿里巴巴图标库官网 https://www.iconfont.cn/ 上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在 Flutter 中，我们使用 ttf 格式即可。

假设我们项目中需要使用一个书籍图标和微信图标，具体操作步骤如下：

进入阿里巴巴图标库官网，登录后，搜索书和微信，找到想要的图标并添加到购物车中，然后点击下载代码
解压后，可以看到里面有几个文件，我们只需要最后两个文件，在项目根目录创建一个 fonts 文件夹，将这两个文件粘贴到文件夹中：
打开 pubspec.yaml 配置文件，找到字体的配置，创建一种新字体，字体文件路径为我们刚刚下载的 ttf 文件

为了使用方便，我们在 lib 目录下定义一个 MyIcons 类，功能和 Icons 类一样，将字体文件中的所有图标都定义成静态变量

import 'package:flutter/material.dart';

class MyIcons {
  //书图标
  static const IconData book = IconData(
      //图标对应的Unicode字符
      0xf00a1,
      //图标所使用的字体系列，也就是刚刚创建的字体名
      fontFamily: 'myIcon',
      //是否根据文本方向进行匹配
      matchTextDirection: true);

  //微信图标
  static const IconData wechat =
      IconData(0xe620, fontFamily: 'myIcon', matchTextDirection: true);
}

在这里插入图片描述

使用自定义图标

import 'package:flutter/material.dart';
import './MyIcons.dart'; //导入自定义图标

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    appBar: AppBar(title: const Text("自定义图标")),
    body: const MyApp(),
  )));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Column(
      children: [
        Icon(MyIcons.book, color: Colors.blue, size: 40),
        SizedBox(width: 20),
        Icon(MyIcons.wechat, color: Color.fromARGB(255, 24, 230, 31), size: 40),
      ],
    ));
  }
}