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,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...
随机推荐
- 文件被sourceTree忽略了怎么办
- react中异步的使用
let promise; promise = this.props.corporationService.preSearchPage(params); promise.then((data) => ...
- python中文编码 - python基础入门(5)
python到目前为止,一共有两个版本,分别是2.x和3.x版本,根据官方正式通知2020年停止对python更新和维护,距离今天还有110天左右,所以正在学习python的小伙伴应该暗中庆幸一波. ...
- Asp.Net Core集成Swagger
工作中一个公司会有很多个项目,项目之间的交互经常需要编写 API 来实现,但是编写文档是一件繁琐耗时的工作,并且随着 API 的迭代,每次都需要去更新维护接口文档,很多时候由于忘记或者人员交替的愿意造 ...
- 学习笔记:oracle学习三:SQL语言基础之检索数据:简单查询、筛选查询
目录 1. 检索数据 1.1 简单查询 1.1.1 检索所有列 1.1.2 检索指定的列 1.1.3 查询日期列 1.1.4 带有表达式的select语句 1.1.5 为列指定别名 1.1.6 显示不 ...
- Html大段文本自适应换行显示-SSM
只处理前端: <style> .ctl{ table-layout:fixed } .ctl td{ word-break:break-all } </style> <d ...
- 用js实现菜单的下拉列表,实用又简单
下拉列表本可以用<select>配合<option>来写,方便得很.但是在前端中,好用的东西都有兼容,为了避免出现兼容性的问题,下拉列表用js写再合适不行了. <body ...
- 利用Python进行数据分析_Pandas_数据加载、存储与文件格式
申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. 1 pandas读取文件的解析函数 read_csv 读取带分隔符的数据,默认 ...
- list列表
list列表 list:一个有序的集合 创建列表 语法格式: 列表名 = [元素1, 元素2, 元素3…….,元素n] 注:列表中的元素⽤逗号隔开. 注:列表⾥⾯的元素可以是不同类型的数据. 列表元素 ...
- SAS学习笔记36 二分类logistic回归
这里所拟合模型的AIC和SC统计量的值均小于只有截距的模型的相应统计量的值,说明含有自变量的模型较仅含有常数项的要好 但模型的最大重新换算 R 方为0.0993,说明模型拟合效果并不好,可能有其他危险 ...