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 ...
随机推荐
- Django之路——8 cookie 和sessions
会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...
- 题解 洛谷P1457 【城堡 The Castle】
这道题,看似很烦,无从下手,但其实只要用位运算和联通快就能水过了呀. 首先,输入:似乎大意是把一个数拆成二进数的相加,分别表示\((i,j)\)东南西北是否有墙.\(1\)表示西,\(2\)表示北,\ ...
- C#使用托管程序连接Oracle数据库(Oracle.ManagedDataAccess.dll)
一.概述 Oracle Data Provider for .NET, Managed Driver: Oracle官方的托管数据库访问组件,单DLL,Oracle.ManagedDataAcces ...
- iptables常用命令二之如何删除nat规则
删除iptables nat 规则 删除FORWARD 规则: iptables -nL FORWARD --line-number iptables -D FORWARD 1 删除一条nat 规则 ...
- DELL 管理软件安装
dell不进入bios修改cpu为高性能的方法:(在下次重启后生效) 首先安装omsa:安装方法: http://linux.dell.com/repo/hardware/Linux_Reposito ...
- ES的入门学习
ES的入门:ES的雇员文档的设计和实现功能 ES的存放中包括:索引,类型,文档,字段 PUT /megacorp/employee/1{{ "first_name" : " ...
- PostgreSQL 查看表、索引等创建时间
select s.oid,s.relname,t.stausename,t.stasubtype from pg_class s,pg_stat_last_operation t where s.re ...
- Postgresql 进程和内存结构
在本章中,总结了PostgreSQL中的流程体系结构和内存体系结构,以帮助阅读后续章节.如果您已经熟悉它们,可以跳过本章 1.进程结构 Postgresql 是一个C/S架构的关系型数据库,由多个后台 ...
- Openwrt路由器上安装python
在路由器安装python之前,还是经过了一番折腾的.淘宝上买了个已经刷好系统的小米迷你路由器,但里面安装的不是预期的Pandorbox,而是LEDE. 这个固件已经带了大量自带的软件,128的内存实在 ...
- WinDbg常用命令系列---查看线程调用栈命令K*简介
Windbg里的K*命令显示给定线程的堆栈帧以及相关信息,对于我们调试时,进行调用栈回溯有很大的帮助. 一.K*命令使用方式 在不同平台上,K*命令的使用组合如下 User-Mode, x86 Pro ...