flutter 图片组件Image、圆角组件ClipOval

标签: flutter

Image:

	加载网络图片:
		Image.network(
			"路径',
			height:n,
			weight:n,
			fit:BoxFit.cover,  显示方式
		)
	
在Container组件中加载图片的第二种方式,在decoration种加载

	Container(
		width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
          color:Colors.orange,
          borderRadius: BorderRadius.circular(150),
          image:DecorationImage(
            image: NetworkImage("路径"),
            fit:BoxFit.cover   显示方式
				)
          )
	)

ClipOval:

	圆角组件,相当于一个已经有圆角的div,若子组件是矩形,将会以圆显示,否则为椭圆
		
		ClipOval(
			child:组件
		)
		

Image加载本地图片:

	(1)在项目根目录创建images文件夹->创建2.0x、3.0x、4.0x文件夹以满足屏幕自适应图片->在pubspec.yaml文件中,将注释掉的assets恢复,并添加-images/图片路径
		调用:
			Image.asset('images/路径');
			
			图片也可以不放进2.0x等文件夹内,但必须创建2.0x和3.0x,图片路径也必须添加进assets内

在这里插入图片描述在这里插入图片描述
代码示例:

import 'package:flutter/material.dart';

void main(){
  runApp(App());
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title:Text('aac')
        ),
        body:Home4()
      )
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Container(
        child: Image.network("https://i0.hdslb.com/bfs/archive/6c9fa26d543f52553ad24b2558327869506f1247.jpg@1375w_605h_1c_100q.webp"
          ,alignment: Alignment.topCenter,
          color: Colors.yellow, //图片背景颜色
          colorBlendMode: BlendMode.colorBurn, //图片混合,配合color使用
          fit: BoxFit.contain,//显示方式
          repeat: ImageRepeat.repeat, //重复
        ),
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
          color:Colors.orange
        ),
      )
      );
  }
}

class Home2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Container(

        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
          color:Colors.orange,
          // borderRadius: BorderRadius.all(Radius.circular(150))
          borderRadius: BorderRadius.circular(150),
          image:DecorationImage(
            image: NetworkImage("https://i0.hdslb.com/bfs/sycp/creative_img/202004/1c720bb11be03bec3e8a37d6bf2dbfaf.jpg@1375w_605h_1c_100q.webp"),
            fit:BoxFit.cover
          )
        ),
      )
      );
  }
}

class Home3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Container(
        child: ClipOval(
          child:Image.network("https://i0.hdslb.com/bfs/sycp/creative_img/202004/1c720bb11be03bec3e8a37d6bf2dbfaf.jpg@1375w_605h_1c_100q.webp",
            height:100,
            width:100,
            fit:BoxFit.cover
          ) ,
        
        ),
       )
      );
  }
}

class Home4 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Container(
        child: ClipOval(
          child:Image.asset("images/2.0x/钢铁侠4.jpg",
            height:100,
            width:100,
            fit:BoxFit.cover
          ) ,
        
        ),
       )
      );
  }
}
版权声明:本文为weixin_43294560原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43294560/article/details/105449363

智能推荐

python is not set from command line or npm configuration

问题 猜测原因  python版本冲突 解决方案  去官网找到最新版本python 点击下载,注意记住你下载的目录,下载好以后,打开这个目录下的文件夹,Python310, 整个文件夹复制一下 在项目里运行npm config list --json 找到python的路径   我的是 C:\\Python27\\python.exe 说明项目里用的还是py...

Java8 Stream流操作

前言 我们常常需要将一个容器转化成另一个容器,或是对这个容器中的数据进行批量处理,这时使用Stream流可以大大减少我们的工作量。 1 Stream概述 Java 8 是一个非常成功的版本,这个版本新增的Stream,配合同版本出现的 Lambda ,给我们操作集合(Collection)提供了极大的便利。 那么什么是Stream? Stream将要处理的元素集合看作一种流,在流的过程中,借助St...

带你玩转Visual Studio——带你跳出坑爹的Runtime Library坑

在Windows下进行C++的开发,不可避免的要与Windows的底层库进行交互,然而VS下的一项设置MT、MTd、MD和MDd却经常让人搞迷糊,相信不少人都被他坑过,特别是你工程使用了很多第三库的时候,及容易出现各种链接问题。看一下下面这个错误提示:  LIBCMT.lib(_file.obj) : error LNK2005: ___initstdio already defined...

git 设置 gitignore 忽略 __pycache__

清除git缓存中的pycache 直接删掉硬盘上的文件 如果我想保留硬盘上的这个文件,而只删除版本管理中的文件,就需要加入--cached参数。 切换分支出现问题 尽管我已经删除了__pycache__,硬盘也没有了,但是切换分支的时候依然是会提示本地重写的情况。 提示:需要我在切换分支之前,提交一次更新。 提交了更新之后,再来尝试切换分支,如下: 成功了,说明当做了任何变更之后,切换分支前需要执...

人生苦短,我用Python(二)— 爬取会议网站 EasyChair Smart CFP

寒假留校帮学长写了个爬虫,抓取会议网站上一些CFP信息。想着把一些知识点、坑点记下来,一来做个小总结给工作收收尾,二是以后再遇到好从容应对。 这是我写的第二个比较完善的爬虫了,比第一个要简单许多,完全过程化的代码,而且easychair这个网站页面布局比较友好,适合python新手、前端小白入门练习。但这个网站反爬比较厉害,写爬虫的过程中就被ban了好几次…… 制定抓取...

猜你喜欢

(三)Single Threaded Execution模式

一、定义 一个线程执行。有时也称为Critical Section(临界区)。   二、模式案例 案例: 假设有三个人,频繁地通过一扇门,规定每次只能通过一个人,当通过一个人时,程序会将通过的总人次加1,同时记录该次通过人的姓名和出生地。   门的定义:   人的定义     测试类     多次执行后发现可能出现以下结果: &...

Linux服务管理之系统管理员需要掌握的命令

为什么80%的码农都做不了架构师?>>>    systemd的主要命令行工具是systemctl。大多数Linux系统管理员应该都已经非常熟悉系统服务和init系统管理,比如service,chkconfig和telinit命令的使用。systemd也完成同样的管理任务,只是命令工具systemctl的语法有所不同而已。 1. sysvinit和system...

StringBuilder和StringBuffer的区别(检查多线程环境下会触发的问题和异常)

StringBuilder和StringBuffer的区别在哪里?                当接触这个问题的时候,我们可能第一反应就是,StringBuilder是线程不安全的,StringBuffer是线程安全的 为什么StringBuilder是线程不安全,StringBuffer是线程安全?   ...

机器学习实战之决策树基础笔记

决策树的优缺点 优点 计算复杂度不高 输出结果容易理解 对中间值的缺失不敏感 可以处理不相关特征数据 缺点 可能会产生过度匹配问题 决策树原理 《机器学习实战》书中讲了二十个问题的游戏的一个例子:就是参与游戏的一方脑子里想着某个事物。其他参与者可以向他提29个问题,但是答案只能用对错来回答。比如最简单的猜数游戏。我心里想一个数是7.然后A说你心里想的数比100小。然后我说正确。然后B说你心里想的数...

前端模型--纯js实现手风琴accordian

本文主要介绍纯js实现手风琴accordian。 手风琴模型图如下: 前端代码.html+.js Tips:本文讲两者放在一起,如需引用请自行将js放在外部 样式重置reset.css tips:由于前端html代码元素都自带基础样式,所以需要重置 手风琴样式accordian.css...