CircleAvatar小部件内置于flutter SDK 中。它只是一个圆圈,我们可以在其中添加背景颜色、背景图像或一些文本。它通常用他的图像或他的姓名首字母代表用户。虽然我们可以从头开始制作一个类似的小部件,但这个小部件在应用程序的快速开发中会派上用场。
CircleAvatar 类的构造函数:
const CircleAvatar(
{Key key,
Widget child,
Color backgroundColor,
ImageProvider
CircleAvatar 小部件的属性:
- backgroundColor:该属性以颜色类( final)为参数。此属性决定圆圈的背景颜色,默认情况下,它设置为ThemeData.primaryColorLight。
- backgroundImage:此属性将ImageProvider
类(最终) 作为参数。此属性将背景图像应用于CircleAvatar小部件。 - child: child属性将小部件放置在小部件树中的CircleAvatar小部件下方或将小部件显示在圆圈内。
- foregroundColor:此属性将Color类 ( final)作为参数值。它决定了CircleAvatar 中文本的默认颜色。
- maxRadius:此属性采用双精度值来决定CircleAvatar可以达到的最大尺寸。
- minRadius:这个minRadius属性也接受一个 double 值作为参数,它决定了CirculAvatar的最小尺寸。
- onBackgroundImageError:此属性控制如果由于某种原因缺少背景图像时要执行的操作。
- radius: radius属性也有一个double值作为参数来决定CircleAvatar的大小,如果它的半径。
句法:
void Function(
dynamic exception,
StackTrace stackTrace
) onBackgroundImageError
示例 1:在此示例中,我们显示了一个绿色圆圈,其中包含一些文本。
主要的。dart
Dart
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {},
), //IcoButton
actions: [
IconButton(
icon: Icon(Icons.comment),
tooltip: 'Comment',
onPressed: () {},
), //IconButton
], //[]
), //AppBar
body: Center(
child: CircleAvatar(
backgroundColor: Colors.greenAccent[400],
radius: 100,
child: Text(
'GeeksForGeeks',
style: TextStyle(fontSize: 25, color: Colors.white),
), //Text
), //CirlceAvatar
), //Center
), //Scaffold
debugShowCheckedModeBanner: false,
), //MaterialApp
);
}
输出:
注意:我们也可以使用foregroundColor属性来
指定默认文本颜色,而不是在 TextStyle 中执行。
...
foregroundColor: Colors.white,
...
说明:在CircularAvatar小部件中,我们将半径设置为100 ,背景色设置为greenAccent[400] 。 CircleAvatar将Text小部件视为子项。文字是“GeeksforGeeks”。我们还通过将字体大小设置为 25 和文本颜色为白色来对文本进行样式设置。
示例 2:这里我们在CirlceAvatar 中添加了来自互联网的图像。
// Code snippet of CircleAvatar
...
body: Center(
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
radius: 100,
), //CircleAvatar
...
输出:
说明:在本例中,我们使用backgroundImage属性在CircleAvatar小部件内设置了一个图像。该图像是 geekforgeeks 徽标,其地址在NetworkImages的参数中提供。最后,我们为 CircleAvatar 的半径指定了 100 作为值。
示例 3:在此示例中,我们在CircleAvatar周围添加了边框。
// Code snippet of CircleAvatar
...
body: Center(
child: CircleAvatar(
backgroundColor: Colors.green,
radius: 115,
child: CircleAvatar(
backgroundColor: Colors.greenAccent[100],
radius: 110,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
radius: 100,
), //CircleAvatar
), //CircleAvatar
), //CircleAvatar
), //Center
...
输出:
说明:这里我们在上一个示例中添加的NetworkImage周围添加了两个边框。从本质上讲我们有什么下来是我们包裹其中包含图像,具有100像素的半径,具有更大的尺寸的两个CircleAvatar小部件CircleAvatar。现在,最顶部的 CircleAvatar 被赋予绿色背景和 115 像素的边框半径。在其下方的CircleAvatar中,我们将backgroundColor设置为greenAccent [400],其半径为 110 px。
所以,这是我们如何能够在小部件flutter和这些例子完整的代码使用CircleAvatar,您可以点击这里。