CircleAvatar 只是一个圆圈,可以在其中添加背景颜色、背景图像或一些文本。它通常用他的图像或他的姓名首字母代表用户。虽然可以从头开始制作一个类似的小部件,但这个小部件在应用程序的快速开发中会派上用场。
CircleAvatar 构造函数
const CircleAvatar(
{Key key,
Widget child,
Color backgroundColor,
ImageProvider<Object> backgroundImage,
void onBackgroundImageError(
dynamic exception,
StackTrace stackTrace
),
Color foregroundColor,
double radius,
double minRadius,
double maxRadius}
)
下面让我们从一个简单的 CircleAvatar 开始,它由给定的背景图像和默认背景颜色组成。
CircleAvatar(
radius: 100,
backgroundImage: NetworkImage("/images/boy-128.png"),
)
效果如下:
基本上,CircleAvatar 不提供设置边框的属性。但是,可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中,以创建类似于边框的内容。
CircleAvatar(
radius: 110,
backgroundColor: Color(0xffFDCF09),
child: CircleAvatar(
radius: 100,
backgroundImage: NetworkImage("/images/boy-128.png"),
)
)
运行效果如下:
示例:带有用户姓名首字母的 CircleAvatar。
CircleAvatar(
radius: 110,
backgroundColor: Colors.greenAccent[400],
child: Text(
'TVH',
style: TextStyle(
fontSize: 90,
color: Colors.white
),
),
)
运行效果如下:
2. child
Widget child
3. backgroundColor
backgroundColor - CircleAvatar 的背景颜色。
如果 foregroundColor 为深色,backgroundColor 的默认值为 ThemeData.primaryColorLight,如果 foregroundColor 为浅色,则默认值为 ThemeData.primaryColorDark。
Color backgroundColor
示例:
CircleAvatar(
radius: 110,
backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
backgroundColor: Colors.cyan[100],
)
效果如下:
4. backgroundImage
background Image - Circle Avatar 的背景图像,即用户的头像。
如果要在 CircleAvatar 上显示用户的姓名首字母,请使用 child 属性。
ImageProvider<Object> backgroundImage
示例:
CircleAvatar(
radius: 110,
backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
)
5. foregroundColor
foregroundColor - CircleAvatar 中文本的默认颜色。
如果 backgroundColor 为深色,则 foregroundColor 的默认值为 ThemeData.primaryColorLight,如果 backgroundColor 为浅色,则为 ThemeData.primaryColorDark。
Color foregroundColor
示例代码:
CircleAvatar(
radius: 110,
foregroundColor: Colors.red,
child: Text(
'TVH',
style: TextStyle(
fontSize: 90
),
),
)
示例效果如下:
6. radius
radius - CircleAvatar 圆的半径。
如果指定了半径,则不能指定 minRadius 和 maxRadius。指定半径也等同于指定 minRadius 和 maxRadius 的值,它们都具有相同的值。
double radius
7. minRadius
minRadius - CircleAvatar 的最小半径。
如果指定了 minRadius,则不会指定半径。Flutter 会根据可用空间自动为 CircleAvatar 计算合适的大小。
double minRadius
8.maxRadius
maxRadius - CircleAvatar 的最大半径。
如果指定了 maxRadius,则不会指定半径。Flutter 会根据可用空间自动为 CircleAvatar 计算合适的大小。
double maxRadius
9. onBackgroundImageError
onBackgroundImageError - 一个可选的回调函数 - 在 backgroundImage 发生图像加载错误时调用。
void onBackgroundImageError(
dynamic exception,
StackTrace stackTrace
)
示例:CircleAvatar 尝试显示用户的头像。如果加载图像时发生错误,它将显示错误文本。
文件:onBackgroundImageError.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
// String imageUrl = "https://s3.o7planning.com/images/boy-128.png";
String imageUrl = "https://file-not-found";
bool _loadImageError = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter CircleAvatar Example")
),
body: Center (
child: CircleAvatar(
radius: 100,
backgroundImage: this._loadImageError? null: NetworkImage(this.imageUrl),
onBackgroundImageError: this._loadImageError? null:
(dynamic exception, StackTrace stackTrace) {
print("Error loading image! " + exception.toString());
this.setState(() {
this._loadImageError = true;
});
},
child: this._loadImageError? Text("Error loading image!") : null
)
)
);
}
}
运行效果如下 -