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. 数据链路层学习之LLDP

    数据链路层学习之LLDP 2013年09月02日 20:38:36 goodluckwhh 阅读数 42323   一.LLDP协议概述 随着网络技术的发展,接入网络的设备的种类越来越多,配置越来越复 ...

  2. Mac安装7Z以及Mac下查看隐藏文件夹

    一:Mac下安装7Z: 1:brew直接安装解压工具 $ brew search 7z 会搜索到: ==> Formulae p7zip 2:$ brew install p7zip       ...

  3. Android核心程序之SystemUI - (一)开篇

    UI是实现用户交互的重要途径之一,而Android中一个重要的UI元素就是SystemUI,本文分析基于Android 5.1,分析SystemUI的启动及运行过程. SystemUI源代码所在路径为 ...

  4. 获取radio点击事件

    获取radio点击事件,不能用click(),而是用change(). $('input[name="options"]').change(function(){ console. ...

  5. 1、4 前后端分离,写静态HTML文件,通过ajax 返回数据

    1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  6. 26.Spark创建RDD集合

    打开eclipse创建maven项目 pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...

  7. [转帖]linux下查找文件及查找包含指定内容的文件常用命令。

    linux下查找文件及查找包含指定内容的文件常用命令. https://blog.csdn.net/yangyu19910407/article/details/18266821 最简单的查找 fin ...

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

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

  9. Oracle常用基础语句(杂)

    打开服务 WIN + R services.msc 登录 --方法1 --WIN + R --CMD sqlplus / as sysdba --方法2,常用 --WIN + R --CMD --&q ...

  10. 涛哥:Qt安卓-5.12环境搭建

    简介 Qt for android 环境搭建,以Windows平台 Qt5.12为基准. 因为有不少人问相关问题,所以写篇文章汇总一下. 安装Qt 需要先安装Android版的Qt. 一般在Qt的安装 ...