Flutter——CircleAvatar组件(圆形头像组件)

Posted chichung

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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圆角设置组件

flutter 图片Image实现圆角的四种方法

Flutter:将图标放置在居中的 CircleAvatar 旁边

Flutter CircleAvatar backgroundImage没有填满圆圈

Flutter-CircleAvatar圆形和圆角图片

有没有办法将图像从本地存储加载到 Flutter 中 CircleAvatar 小部件的 backgroundImage 属性?