Flutter——CircleAvatar组件(圆形头像组件)

import 'package:flutter/material.dart';
import 'res/listData.dart'; void main() {
runApp(MaterialApp(
title: "demo",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("FlutterDemo"),),
body: ListView(
children: listData.map((value) {
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 20/9,
child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"]),
),
title: Text(value["title"]),
subtitle: Text(value["description"],maxLines: 1,overflow: TextOverflow.ellipsis),
)
],
),
);
}).toList()
)
);
}
}
Flutter——CircleAvatar组件(圆形头像组件)的更多相关文章
- Flutter 图片、圆形头像、圆角图片....各种形状
图片 1. 本地图片 Image.asset 加载项目资源包的图片 //先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets Image.as ...
- 圆形头像以及一些常见需求形状自定义ImageView组件
在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,lib和demo下载地址:https://github.com/mapl ...
- 几行实现圆形头像,以及一些常见需求形状自定义ImageView组件
在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,我已把自己平常用的组件和demo上传到了github(https://g ...
- 【Flutter学习】基本组件之图片组件Image
一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函 ...
- 【Flutter实战】六大布局组件及半圆菜单案例
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...
- 丢掉Mask遮罩,更好的圆形Image组件[Unity]
写在前面 全文解析圆形Image组件的实现原理,取关键代码介绍算法细节,源码已经上传Github下载地址,欢迎下载试用. 一.Unity原生Image组件实现圆形图片的缺陷 Mask渲染消耗 许多游戏 ...
- flutter Container组件和Text组件
在开始之前,我们先写一个最简单的入口文件: 后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...
- Flutter入门之有状态组件
StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...
- Flutter入门之无状态组件
Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...
随机推荐
- iOS-GCD处理后台线程和UI线程的交互
一个例子: 在iPhone上做一个下载网页的功能,就是:在iPhone上放一个按钮,单击按钮时,显示一个转动的圆圈,表示正在进行下载,下载完成后,将内容加载到界面上的一个文本控件上. 使用GCD前: ...
- 安装android sdk,后出现导出错误,提示命令行找不到解决方案
The steps. Rename android sdk tool folder : [Your Android SDK root]/tools -> toolsXXXX Download S ...
- Egret入门学习日记 --- 第二十篇(书中 9.1~9.3 节 内容 组件篇)
第二十篇(书中 9.1~9.3 节 内容 组件篇) 第八章中的内容. 以上都是基本的Js知识,我就不录入了. 直接来看 第9章. 开始 9.1节. 以上内容告诉你,Egret官方舍弃了GUI,使用了E ...
- 已经安装了VRay但3dmax的材质编辑器里没有VRay材质的解决过程
已经安装了VRay但3dmax的材质编辑器里没有VRay材质怎么办? 众所周知,vray是一款很好用的渲染器,但是安装过程和使用当中总会出现各种问题.昨天我就遇到了,捣鼓半天终于解决,分享给大家自己的 ...
- 【计算机视觉】detection/region/object proposal 方法综述文章
目录(?)[-] Papers 大纲 各种OP方法的回顾 Grouping proposal methods Window scoring proposal methods Aliternate pr ...
- Learning to Rank:pointwise, pairwise, listwise 总结
值得看: 刘铁岩老师的<Learning to Rank for Information Retrieval>和李航老师的<Learning to rank for informat ...
- jqGrid获取展示的所有行id集合
$("#jqGrid").getDataIDs();
- golang json解析到map中
package main import ( "fmt" "encoding/json" ) type ItemMessage struct { ItemType ...
- 如何制作windows live writer绿色便携版
如何制作windows live writer绿色便携版 2013年10月03日 ⁄ 综合 ⁄ 共 463字 ⁄ 字号 小 中 大 ⁄ 评论关闭 制作一个绿色便携版的wlw 1.首先下载 techli ...
- Greenplum 5.21.1 集群安装部署
简单来说GPDB是一个分布式数据库软件,其可以管理和处理分布在多个不同主机上的海量数据.对于GPDB来说,一个DB实例实际上是由多个独立的PostgreSQL实例组成的,它们分布在不同的物理主机上,协 ...