Skip to content

Commit

Permalink
Merge pull request #20 from Tencent/feature/avatar_background_color
Browse files Browse the repository at this point in the history 
add:头像类型为字符、图标时，支持自定义背景颜色
  • Loading branch information
@Luozf12345
Luozf12345 authored Jan 2, 2024
2 parents c3e1040 + 9e82d11 commit 23796cb
Showing 1 changed file with 73 additions and 102 deletions.
175 changes: 73 additions & 102 deletions tdesign-component/lib/src/components/avatar/td_avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,25 @@ enum TDAvatarShape {

/// 用于头像显示
class TDAvatar extends StatelessWidget {
const TDAvatar(
{Key? key,
this.size = TDAvatarSize.medium,
this.type = TDAvatarType.normal,
this.shape = TDAvatarShape.circle,
this.text,
this.radius,
this.icon,
this.avatarUrl,
this.avatarSize,
this.avatarDisplayList,
this.displayText,
this.onTap,
this.defaultUrl = '',
this.avatarDisplayWidget,
this.avatarDisplayBorder = 2,
this.avatarDisplayListAsset,})
: super(key: key);
const TDAvatar({
Key? key,
this.size = TDAvatarSize.medium,
this.type = TDAvatarType.normal,
this.shape = TDAvatarShape.circle,
this.text,
this.radius,
this.icon,
this.avatarUrl,
this.avatarSize,
this.avatarDisplayList,
this.displayText,
this.onTap,
this.defaultUrl = '',
this.avatarDisplayWidget,
this.avatarDisplayBorder = 2,
this.avatarDisplayListAsset,
this.backgroundColor,
}) : super(key: key);

/// 头像地址
final String? avatarUrl;
Expand Down Expand Up @@ -82,7 +83,8 @@ class TDAvatar extends StatelessWidget {
/// 操作点击事件
final Function()? onTap;


/// 自定义文案时背景色
final Color? backgroundColor;

double _getAvatarWidth() {
double width;
Expand Down Expand Up @@ -134,7 +136,7 @@ class TDAvatar extends StatelessWidget {

double _getAvatarRadius(BuildContext context) {
double _radius;
switch(shape) {
switch (shape) {
case TDAvatarShape.circle:
_radius = _getAvatarWidth() / 2;
break;
Expand All @@ -150,32 +152,36 @@ class TDAvatar extends StatelessWidget {
switch (type) {
case TDAvatarType.icon:
return Container(
width: _getAvatarWidth(),
height: _getAvatarWidth(),
decoration: BoxDecoration(
color: TDTheme.of(context).brandColor2,
borderRadius: BorderRadius.circular(_getAvatarRadius(context)),),
child: Center(child: Icon(icon ?? TDIcons.user, size: _getIconWidth(), color: TDTheme.of(context).brandNormalColor)),
width: _getAvatarWidth(),
height: _getAvatarWidth(),
decoration: BoxDecoration(
color: backgroundColor ?? TDTheme.of(context).brandColor2,
borderRadius: BorderRadius.circular(_getAvatarRadius(context)),
),
child: Center(
child: Icon(icon ?? TDIcons.user, size: _getIconWidth(), color: TDTheme.of(context).brandNormalColor)),
);
case TDAvatarType.normal:
return Container(
width: _getAvatarWidth(),
height: _getAvatarWidth(),
decoration: BoxDecoration(
color: TDTheme.of(context).brandColor2,
borderRadius: BorderRadius.circular(_getAvatarRadius(context)),
image: avatarUrl != null
? DecorationImage(image: NetworkImage(avatarUrl!))
: defaultUrl != ''
? DecorationImage(image: AssetImage(defaultUrl)) : null),
color: backgroundColor ?? TDTheme.of(context).brandColor2,
borderRadius: BorderRadius.circular(_getAvatarRadius(context)),
image: avatarUrl != null
? DecorationImage(image: NetworkImage(avatarUrl!))
: defaultUrl != ''
? DecorationImage(image: AssetImage(defaultUrl))
: null),
);
case TDAvatarType.customText:
return Container(
width: _getAvatarWidth(),
height: _getAvatarWidth(),
decoration: BoxDecoration(
color: TDTheme.of(context).brandNormalColor,
borderRadius: BorderRadius.circular(_getAvatarRadius(context)),),
color: backgroundColor ?? TDTheme.of(context).brandNormalColor,
borderRadius: BorderRadius.circular(_getAvatarRadius(context)),
),
child: Center(
child: TDText(
text,
Expand Down Expand Up @@ -211,7 +217,8 @@ class TDAvatar extends StatelessWidget {

Widget buildOperationAvatar(BuildContext context) {
var list = <Widget>[];
if ((avatarDisplayList == null || avatarDisplayList!.isEmpty) && (avatarDisplayListAsset == null || avatarDisplayListAsset!.isEmpty)) {
if ((avatarDisplayList == null || avatarDisplayList!.isEmpty) &&
(avatarDisplayListAsset == null || avatarDisplayListAsset!.isEmpty)) {
return Container();
}

Expand All @@ -232,21 +239,16 @@ class TDAvatar extends StatelessWidget {
},
child: Container(
child: Center(
child: Icon(TDIcons.user_add,
size: _getIconWidth(),
color: TDTheme.of(context).brandNormalColor),
child: Icon(TDIcons.user_add, size: _getIconWidth(), color: TDTheme.of(context).brandNormalColor),
),
width: _getAvatarWidth(),
height: _getAvatarWidth(),
clipBehavior: Clip.hardEdge,
decoration: ShapeDecoration(
color: TDTheme.of(context).brandColor2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
)),
)));
} else {
Expand All @@ -258,14 +260,9 @@ class TDAvatar extends StatelessWidget {
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
image: DecorationImage(
image: NetworkImage(avatarDisplayList![i]),
fit: BoxFit.cover)))));
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
image: DecorationImage(image: NetworkImage(avatarDisplayList![i]), fit: BoxFit.cover)))));
}
}
} else if (avatarDisplayListAsset != null) {
Expand All @@ -283,21 +280,17 @@ class TDAvatar extends StatelessWidget {
},
child: Container(
child: Center(
child: avatarDisplayWidget ?? Icon(TDIcons.user_add,
size: _getIconWidth(),
color: TDTheme.of(context).brandNormalColor),
child: avatarDisplayWidget ??
Icon(TDIcons.user_add, size: _getIconWidth(), color: TDTheme.of(context).brandNormalColor),
),
width: _getAvatarWidth(),
height: _getAvatarWidth(),
clipBehavior: Clip.hardEdge,
decoration: ShapeDecoration(
color: TDTheme.of(context).brandColor2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
)),
)));
} else {
Expand All @@ -309,35 +302,30 @@ class TDAvatar extends StatelessWidget {
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
image: DecorationImage(
image: AssetImage(avatarDisplayListAsset![i]),
fit: BoxFit.fill)))));
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
image: DecorationImage(image: AssetImage(avatarDisplayListAsset![i]), fit: BoxFit.fill)))));
}
}
}

return SizedBox(
height: _getAvatarWidth(),
width: _getAvatarWidth() * (length + 1) -
length * _getDisplayPadding(),
width: _getAvatarWidth() * (length + 1) - length * _getDisplayPadding(),
child: Stack(children: list),
);
}

Widget buildDisplayAvatar(BuildContext context) {
var list = <Widget>[];
if ((avatarDisplayList == null || avatarDisplayList!.isEmpty) && (avatarDisplayListAsset == null || avatarDisplayListAsset!.isEmpty)) {
if ((avatarDisplayList == null || avatarDisplayList!.isEmpty) &&
(avatarDisplayListAsset == null || avatarDisplayListAsset!.isEmpty)) {
return Container();
}

var length = 0;

if(avatarDisplayList != null) {
if (avatarDisplayList != null) {
length = avatarDisplayList!.length;
for (var i = avatarDisplayList!.length; i >= 0; i--) {
var left = (_getAvatarWidth() - _getDisplayPadding()) * i;
Expand All @@ -361,11 +349,8 @@ class TDAvatar extends StatelessWidget {
decoration: ShapeDecoration(
color: TDTheme.of(context).brandColor2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
))));
} else {
list.add(Positioned(
Expand All @@ -376,14 +361,9 @@ class TDAvatar extends StatelessWidget {
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
image: DecorationImage(
image: NetworkImage(avatarDisplayList![i]),
fit: BoxFit.cover)))));
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
image: DecorationImage(image: NetworkImage(avatarDisplayList![i]), fit: BoxFit.cover)))));
}
}
} else if (avatarDisplayListAsset != null) {
Expand All @@ -408,14 +388,11 @@ class TDAvatar extends StatelessWidget {
height: _getAvatarWidth(),
clipBehavior: Clip.hardEdge,
decoration: ShapeDecoration(
color: TDTheme.of(context).brandColor2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
))));
color: TDTheme.of(context).brandColor2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
))));
} else {
list.add(Positioned(
left: left,
Expand All @@ -425,22 +402,16 @@ class TDAvatar extends StatelessWidget {
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(
color: Colors.white,
width: avatarDisplayBorder)),
image: DecorationImage(
image: AssetImage(avatarDisplayListAsset![i]),
fit: BoxFit.cover)))));
borderRadius: BorderRadius.circular(_getAvatarWidth() - _getDisplayPadding()),
side: BorderSide(color: Colors.white, width: avatarDisplayBorder)),
image: DecorationImage(image: AssetImage(avatarDisplayListAsset![i]), fit: BoxFit.cover)))));
}
}
}

return SizedBox(
height: _getAvatarWidth(),
width: _getAvatarWidth() * (length + 1) -
length * _getDisplayPadding(),
width: _getAvatarWidth() * (length + 1) - length * _getDisplayPadding(),
child: Stack(children: list),
);
}
Expand Down

0 comments on commit 23796cb

Please sign in to comment.