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()
      )
    );
  }
}

原文地址:https://www.cnblogs.com/chichung/p/11994396.html

时间: 2024-11-04 16:15:06

Flutter——CircleAvatar组件(圆形头像组件)的相关文章

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

在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,lib和demo下载地址:https://github.com/mapleyuan/RoundImageView.效果如下,大家有兴趣的可以下下来使用,发现有什么问题也欢迎向我提出. 下面我大概讲下实现. 首先当然是继承ImageView,重写onDraw()方法.我们来看看onDraw的实现:     protected void onDraw(Canvas canv

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

在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,我已把自己平常用的组件和demo上传到了github(https://github.com/mapleyuan/RoundImageView)上,效果如下.大家有兴趣的可以下下来使用,发现有什么问题也欢迎向我提出. 下面我大概讲下实现. 首先当然是继承ImageView,重写onDraw()方法.我们来看看onDraw的实现: @Override     protect

【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~ 本文原创地址:http://www.cnblogs.com/landeanfen/p/5603790.html 七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红

圆形头像CircleImageView和Cardview使用

效果: 圆形头像在我们的日常使用的app中很常见,因为圆形的头像比较美观. 使用圆形图片的方法可能有我们直接将图片裁剪成圆形再在app中使用, 还有就是使用自定义View对我们设置的任何图片自动裁剪成圆形. 这里使用github上CircleImageView github:https://github.com/hdodenhof/CircleImageView CardView顾名思义卡片式的View, CardView继承的是FrameLayout,所以摆放内部控件的时候需要注意一下 可以设

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

圆形头像处理

#import "MainViewController.h" @interface MainViewController () @end @implementation MainViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //创建圆形头像视图 UIImageView*avatar=[[[UIImageView al

【Android】自定义圆形ImageView(圆形头像 可指定大小)

最近在仿手Q的UI,这里面经常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这种头像的原理.不过里面提供的方法还有一个不足的地方就是不能根据实际需求改变图片的大小,也就是说提供的原图是大尺寸的,转换之后的图片也是大尺寸的,这显然不符合我们实际项目中的需求.于是我对里面介绍的第一种方法做了一番改进,使其能直接在XML中指定图片的大小. 大体步骤 将原图居中裁剪成正方形 根据指定的宽度对正方形进行缩放 裁剪成圆形 效果 代码实现 package com.de

iOS实现头像选取(照相或者图片库)、大小等比缩放、生成圆形头像

//弹出actionsheet.选择获取头像的方式//从相册获取图片 -(void)takePictureClick:(UIButton *)sender { // /*注:使用,需要实现以下协议:UIImagePickerControllerDelegate, // UINavigationControllerDelegate // */ // UIImagePickerController *picker = [[UIImagePickerController alloc]init]; //

vue的全局组件和局部组件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>全局组件.局部组件</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="a