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组件(圆形头像组件)的更多相关文章

  1. Flutter 图片、圆形头像、圆角图片....各种形状

    图片 1. 本地图片 Image.asset 加载项目资源包的图片 //先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets Image.as ...

  2. 圆形头像以及一些常见需求形状自定义ImageView组件

    在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,lib和demo下载地址:https://github.com/mapl ...

  3. 几行实现圆形头像,以及一些常见需求形状自定义ImageView组件

    在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,我已把自己平常用的组件和demo上传到了github(https://g ...

  4. 【Flutter学习】基本组件之图片组件Image

    一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函 ...

  5. 【Flutter实战】六大布局组件及半圆菜单案例

    老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...

  6. 丢掉Mask遮罩,更好的圆形Image组件[Unity]

    写在前面 全文解析圆形Image组件的实现原理,取关键代码介绍算法细节,源码已经上传Github下载地址,欢迎下载试用. 一.Unity原生Image组件实现圆形图片的缺陷 Mask渲染消耗 许多游戏 ...

  7. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  8. Flutter入门之有状态组件

    StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...

  9. Flutter入门之无状态组件

    Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...

随机推荐

  1. python2.6.6升级python2.7.14

    Centos 6.8系统镜像默认安装的 python 环境是 2.6.6,线上需求需要升级到 2.7.14 版本,网上找了相关资料,升级 python 版本比较容易,但 yum/pip 等命令的使用也 ...

  2. linux 安装网易云音乐

    1.首先去官网下载最新的网易云 网易云音乐曾经推出官方Linux版本,提供的下载安装包有:deepin15(32位):http://s1.music.126.net/download/pc/net . ...

  3. php判断进程是否存在

    //计划任务定时检测master进程是否存在,不存在则启动,以root用户运行 public function checkMaster() { $cmd = 'ps axu|grep "Uc ...

  4. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

  5. 【VS2015软件报错】命名空间 system.windows 中不存在类型或命名空间名称 forms (是否缺少程序集引用 )错误

    C#项目: 添加“using System.Windows.Forms;”之后提示“命名空间 system.windows 中不存在类型或命名空间名称 forms (是否缺少程序集引用 )”错误 详细 ...

  6. Direct2D 学习笔记(1)概述

    Direct2D 应用程序接口概述 资源网站 https://docs.microsoft.com/en-us/windows/win32/Direct2D/the-direct2d-api 主要用到 ...

  7. weblogic搭建总结

    目录: 一.安装weblogic软件 二.创建域 三.启动管理节点 四.创建被管理节点 五.部署应用 一.安装weblogic软件 一.关闭selinux和防火墙 service iptables s ...

  8. linux网卡出现问题:Job for network.service failed because the control process exited with error code问题

    [转自]:https://blog.csdn.net/dongfei2033/article/details/81124465 今天在centOS 7下更改完静态ip后发现network服务重启不了, ...

  9. [转帖]华为鲲鹏云服务器实战:华为云鲲鹏KC1实例 vs. 阿里云G5实例

    鲲鹏云服务器实战:华为云鲲鹏KC1实例 vs. 阿里云G5实例 https://m.ithome.com/html/444828.htm 2019-09-12 15:25IT之家 (阿迷) 今年一月份 ...

  10. windows版mysql添加远程访问

    use mysql; ##然后查看下当前连接允许情况 select host, user, authentication_string, plugin from user; ##依次执行 CREATE ...