flutter的 图片组件基本使用
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
const HomeContent({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: ,
height: ,
child: Image.network(
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
alignment: Alignment.bottomRight,
color: Colors.green,
colorBlendMode: BlendMode.screen,
// fit: BoxFit.cover,
repeat: ImageRepeat.repeatX,
),
),
);
}
}
给container设置背景图片或者说是设置圆形图片
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(150),//设置圆形:
image:DecorationImage(
image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
fit: BoxFit.cover
)
),
),
);
}
Widget build(BuildContext context) {
return Center(
child: Container(
child: ClipOval(
child: Image.network(
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
height: ,
width: ,
fit: BoxFit.cover,
),
),
),
);
}
设置圆形:
child: Container(
width: ,
height: ,
decoration: BoxDecoration(
color: Colors.red,
// borderRadius: BorderRadius.all(Radius.circular(150)), //设置圆形:
borderRadius: BorderRadius.circular(),//设置圆形:
image:DecorationImage(
image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
fit: BoxFit.cover
)
),
),
flutter的 图片组件基本使用的更多相关文章
- Flutter学习笔记(10)--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
- flutter图片组件
在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...
- 【Flutter学习】基本组件之图片组件Image
一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函 ...
- 【Flutter实战】图片组件及四大案例
老孟导读:大家好,这是[Flutter实战]系列文章的第三篇,这一篇讲解图片组件,Image有很多高级用法,希望对您有所帮助. 图片组件是Flutter基础组件之一,和文本组件一样必不可少.图片组件包 ...
- 解决flutter的image_cropper组件引入报错问题
在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[A ...
- 图片组件——axure线框图部件库介绍
我们在后面的组件使用中,都统一使用"从部件区域拖拽图片组件到页面区域中" 1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1 ...
- ReactNative: 使用Image图片组件
一.简介 在应用程序中,图片组件非常常见,不论是缩略图.大图.还是小图标等等,都需要使用图片组件进行显示.在Web开发中提供了<img/>标签显示图片,在iOS中提供了UIImageVie ...
- Flutter中Expanded组件用法
Flutter中Expanded组件用法 Expanded组件可以使Row.Column.Flex等子组件在其主轴方向上展开并填充可用空间(例如,Row在水平方向,Column在垂直方向).如果多个子 ...
- 【老孟Flutter】Stateful 组件的生命周期
老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Statefu ...
随机推荐
- Python的安装以及编译器推荐
1.Python的安装和环境配置 1.首先进入Python官网https://www.python.org/downloads/下载安装文件. 2.打开安装文件选择自定义(customize inst ...
- 原生JavaScript和jQuery的较量
JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...
- 语义(Semantics)
流计算语义(Semantics)的定义 每一条记录被流计算系统处理了几次 有三种语义: 1.At most once 一条记录要么被处理一次,要么没有被处理 2.At least once 一条记录可 ...
- Kafka+kylin——kylin2.5.0流式构建
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a_drjiaoda/article/d ...
- 洛谷 P2363 马农
题目描述 分别枚举两个矩阵?那样n^6太要命了. 可以枚举两个矩形的交点 将交点看成原点,可以将整个区域分成四个象限,1与3对应,2与4对应 再枚举相对应的象限计算可以获得的利益,用hash判重 可枚 ...
- 洛谷 P3979 遥远的国度
题目描述 修改某条路径上的值以及询问子树的最小值都最树剖的基础操作,那么如何实现换根呢? 考虑一下三种情况: 1.rot=询问的子树x,答案就是整棵树的最小值 2.rot在x的子树里,只有rot到x这 ...
- BZOJ 1073: [SCOI2007]kshort
二次联通门 : BZOJ 1073: [SCOI2007]kshort /* BZOJ 1073: [SCOI2007]kshort A* k短路 但是会爆一个点, 是卡A*的 */ #include ...
- YII框架的行为
一.什么是行为 行为,也称为 mixins,可以无须改变类继承关系即可增强一个已有的类的功能. 当一个对象或类被注入某些行为后,这个对象可以像访问自己定义的方法和属性一样访问注入进来的方法和属性. 二 ...
- Visual Detail Augmented Mapping for Small Aerial Target Detection(航片动态小目标检测)
1.介绍 航片里小目标占总像元数不足1%,普通目标检测算法如YOLO会有很多错误,主要原因有3点: 1.航片的无关背景占多数 2.目标大小由于飞行高度和拍摄角度不同 3.航片中的小移动目标和噪音会混淆 ...
- 解释下Http协议
HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式. 2.简单快速:客户向服务器请求服务时,只 ...