flutter Image

news2024/9/20 9:45:10

Flutter中,Image是一个用于显示图片的控件,可以显示网络图片、本地图片以及Asset中的图片。Image控件支持多种常见的图片格式,例如PNG、JPEG、GIF等。

  const Image({
    super.key,
    required this.image,
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
  })

Image控件重要属性

Image.network:指定显示的网络图片的URL,用于加载网络图片。
Image.asset:指定显示的本地图片的Asset路径,用于加载Asset目录下的图片。
width和height:设置图片的宽度和高度。

Image.asset

通过Image.asset加载本地图片

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST IMAGE"),
            Container(
                width: 100,
                height: 100,
                child: Image.asset("static/test_image.png"))
          ],
        ),
      ),
    );
  }
}

Image.network

用于加载网络图片。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST IMAGE"),
            Container(
                width: 100,
                height: 100,
                child: Image.network("https://cdn.carlcare.com/carlcare/default/1273327404667740207"))
          ],
        ),
      ),
    );
  }
}

 

实现圆角的几种方式

使用BoxDecoration+DecorationImage+AssetImage实现

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("USE BoxDecoration"),
            Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                  color: Colors.blue,
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("static/test_image.png"),
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(10.0))),
            )
          ],
        ),
      ),
    );
  }
}

ClipRRect+Image实现

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("USE ClipRRect"),
            ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              child: Image.asset(
                "static/test_image.png",
                fit: BoxFit.cover,
                width: 100,
                height: 100,
              ),
            )
          ],
        ),
      ),
    );
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2109631.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用“黑科技”书写“黑神话” | 基于RK3576核心板的三维扫描仪应用方案

《黑神话&#xff1a;悟空》作为国内首款3A游戏大作&#xff0c;上线仅10天全球发行量就已超过1700万份&#xff0c;不论您是否是游戏玩家&#xff0c;相信您都能在各种新闻、宣传和活动中感受到这款游戏的热度。在游戏的众多亮点中&#xff0c;“细腻的场景设计与对名胜古迹的…

3个永不过时的妙招,恢复苹果手机视频不是问题

苹果手机的视频功能较为出色&#xff0c;使用苹果手机拍摄的视频更加真实、清晰&#xff0c;因此许多人会选择使用苹果手机来记录生活点滴。但是&#xff0c;如果我们不小心删除了苹果手机视频&#xff0c;有什么方法可以让这些“生活的回忆”重现呢&#xff1f;别担心&#xf…

拆解一个不靠烧广告的宠物站的流水成长流史丨出海笔记

最近后台收到会员的私信&#xff0c;说宠物投放广告ROI很低。秉承互助分享精神&#xff0c;我们也加入寻找突破口&#xff0c;看看别人的宠物网站是怎么做的。 之前出海笔记分享过 找竞对不能只找头部卖家&#xff0c;所以我们这次选取的是一个接地气的宠物网站alldogboots进行…

torchvision数据集使用

文章目录 一、下载torchvision中的数据集文件二、断点知识点三、数据集形式建立四、展示数据集中的图片 一、下载torchvision中的数据集文件 这段代码是使用PyTorch的torchvision库来加载CIFAR-10数据集。 import torchvision train_set torchvision.datasets.CIFAR10(root&…

EasyExcel 文件导出:表头与内容样式简单设置

文章目录 EasyExcel 文件导出 - 最终效果使用的 EasyExcel的版本设置表头样式和内容样式设置自动列宽 EasyExcel 文件导出 - 最终效果 具体的效果可通过修改代码来自行调整。经过调整后的样式与默认样式相比&#xff0c;美观程度大幅提升。 下面是默认的样式。丑的一批。 使用…

FreeRTOS学习笔记(一)初认RTOS

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、RTOS的引入二、Free RTOS的基本内容2.1 FreeRTOS的特点2.2 Free RTOS编程风格2.3 Free RTOS的配置文件 前言 笔者在去年曾经开始过rtos的学习&#xff08;虽…

模型中间部分的卷积可视化

整体代码如下&#xff1a; def forward(self, x):x self.conv1(x)x1 xout_img3 x1.squeeze()print(out_img3.shape)print("经过第一个卷积之后的输出&#xff1a;",x.shape) import yaml from omegaconf import OmegaConf from pathlib import Path from PIL imp…

景联文科技:提供高质量多模态数据标注,推动智能化转型

随着人工智能技术的快速发展&#xff0c;多模态数据标注成为推动智能系统更深层次理解和应用的关键技术之一。 作为行业领先的多模态数据标注服务商&#xff0c;景联文科技凭借其在技术、流程和人才方面的综合优势&#xff0c;推出了全面的多模态标注解决方案&#xff0c;助力…

C语言详细笔记--构造数据类型(共用体)

目录 一、共用体类型声明 二、共用体变量的定义 三、共用体变量的初始化 四、共用体变量的引用 一、共用体类型声明 共用体类型是一种多个不同类型数据共享存储空间的构造类型&#xff0c;即共用体变量的所以成员占用同一个存储空间&#xff0c;一般声明格式如下&#xff…

【LeetCode面试150】——205同构字符串

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;**定期更新相关算法面试题**&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大…

录屏没声音怎么办?3招解决,教您秒变声音大师

在录屏的过程中&#xff0c;突然发现录制的视频没有声音&#xff0c;这无疑会让人感到沮丧。声音作为视频的重要组成部分&#xff0c;一旦缺失&#xff0c;便会让整个作品失去生动性。然而&#xff0c;不必过于担心&#xff0c;因为录屏没声音的问题并非无法解决。 接下来&…

新手c语言讲解及题目分享(十七)--运算符与表达式专项练习

本文主要讲解c语言的基础部分&#xff0c;运算符与表达式的学习&#xff0c;在这一部分中&#xff0c;往往有许多细节的东西需要去记住。当各种运算符一起用时&#xff0c;就会存在优先级的关系&#xff0c;本文末尾有各种运算符的优先级顺序表。 参考书目和推荐学习书目&#…

开放式耳机哪个牌子好?长文传授6招秘籍,彻底远离坑货!

​大家好&#xff0c;作为一位专注于评测各类数码产品的博主&#xff0c;今天我特别推荐开放式耳机作为我们日常的首选。这种耳机以其独特的设计&#xff0c;避免了传统耳机长时间佩戴可能带来的不适和感染风险。开放式耳机佩戴简便且稳固&#xff0c;尤其适合热爱跑步和运动的…

解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘,不能使用手机内置输入法的问题

整整花费了一天时间测试和解决。试验了多个方法&#xff0c;花了不少美刀&#xff0c;最终才发现抖音这个官方文档&#xff0c;哭了&#xff1a; https://partner.open-douyin.com/docs/resource/zh-CN/mini-game/develop/guide/game-engine/rd-to-SCgame/open-capacity/capabi…

[Python] 从0到1实现一个简单的数字图像识别大模型

目录 前言介绍 神经网络 简单的神经网络 使用均方误差与正规方程实现神经网络 随机梯度下降与批量梯度下降实现神经网络 用更复杂的梯度下降实现一个神经网络 利用Sigmoid激活函数实现神经网络 使用 PyTorch 框架快速构建一个神经网络、 案例实战 前言介绍 大模型的本…

python-网页自动化(二)

获取元素属性 1. 获取属性 以百度首页的logo为例&#xff0c;获取logo相关属性 <img hidefocus"true" id"s_lg_img" class"index-logo-src" src"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width"270…

微服务-nacos

nacos-注册中心 启动 服务注册到nacos

【MIT 6.5840/6.824】In Search of an Understandable Consensus Algorithm 学习笔记

In Search of an Understandable Consensus Algorithm 1 Introduction2 Replicated state machines3 What’s wrong with Paxos?4 Designing for understandability5 The Raft consensus algorithm5.1 Raft basics5.2 Leader election5.3 Log replication5.4 Safety5.4.1 Elec…

知识付费最新版知识付费做的最好的平台,网创资源知识付费 知识付费网站搭建,搭建知识付费APP平台教学:在线教育系统源码。

目录 前言&#xff1a; 一、知识付费平台特点 二、知识付费平台功能 三、 知识付费小程序 前言&#xff1a; 知识付费小程序是一种在线学习平台&#xff0c;用户可以通过该小程序以一定的费用获取专业知识和技能。这些知识和技能可以来自行业专家、教育机构或个人创作者。知…

Docker 容器技术:简化 MySQL 主从复制部署与优化

文章目录 前言一、为什么基于Docker搭建&#xff1f;二、利用Docker搭建主从服务器2.1 配置Master&#xff08;主&#xff09;2.2 配置Slave&#xff08;从&#xff09;2.3 链接Master&#xff08;主&#xff09;和Slave&#xff08;从&#xff09;2.4 测试主从复制 三、常见问…