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,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...
随机推荐
- 【产品】C转B
http://www.woshipm.com/pmd/2780830.html 这篇文章总结的不错.
- 从源码角度解析Netty的React模式是如何工作的
Netty 支持多种实现方式,比如nio,epoll 等,本文以nio的实现方式进行讲解. 1.EventLoop : 事件循环看,简单来说就是一个死循环监听事件,如果事件来了,处理掉.通常做法就是开 ...
- 【数据库开发】学习Redis从这里开始
转载:http://www.epubit.com.cn/article/200 学习Redis从这里开始 本文主要内容 Redis与其他软件的相同之处和不同之处 Redis的用法 使用Python示例 ...
- luogu1972:HH的项链
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...
- [转帖]为何 CPU 只用硅,而不用能耗更低的锗制作?知乎好文章
作者:鲁超链接:https://www.zhihu.com/question/28935966/answer/617701106来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- datanode无法连接到namenode
datanode无法连接到namenode namenode在清空hadoop.tmp.dir和namenode.dir文件夹重新格式化后,datanode还是无法连接到namenode并报错: hd ...
- Python基础 第6章 抽象
1. 引言及抽象和结构 生成斐波那契数列的代码如下: fibs = [0, 1] num = int(input('How many num you want:')) for x in range(n ...
- PyCharm 2018.3.3激活(亲测有效)
转自:简书某大佬 https://www.jianshu.com/p/351dee5d7e54 附截图:
- 【Scratch】它跟Mindstorms,有什么区别?
第197篇文章 老丁的课程 在正式开始这套课程之前,依照老丁的习惯,还是要给大家白话下东西,该怎么学? 本节课,来讲讲我对于学习这个软件(包括和EV3配合起来)的一些看法.同时,也给小朋友们一些编程学 ...
- 通过json_set函数,来修改data字段的值
SELECT REPLACE(json_extract(param,'$.payFundAcc'),'"','') from t_external_trade_event where sta ...