flutter 九宫格菜单_Flutter学习记录-微信群聊九宫格头像

class AppDimens {

static const ChatItemImageDimens = 44.0;

static const ChatItemGroupIconPaddingDimes = 2.0;

static const ChatItemGroupChildIconMarginDimes = 2.0;

}

var row = 0, column = 0;

// 群聊九宫格头像

class WeChatGroupChatIcon extends StatelessWidget {

WeChatGroupChatIcon({Key key, @required this.avatars})

: assert(avatars != null),

super(key: key);

final List avatars;

@override

Widget build(BuildContext context) {

var childCount = avatars.length;

var columnMax;

List icons = [];

List stacks = [];

// 五张图片之后(包含5张)，每行的最大列数是3

var imgWidth;

if (childCount < 2) {

return Container(

width: AppDimens.ChatItemImageDimens,

height: AppDimens.ChatItemImageDimens,

color: Color(AppColors.DiverColor),

);

}

if (childCount >= 5) {

columnMax = 3;

imgWidth = (AppDimens.ChatItemImageDimens -

(AppDimens.ChatItemGroupIconPaddingDimes * columnMax) -

AppDimens.ChatItemGroupChildIconMarginDimes) /

columnMax;

} else {

columnMax = 2;

imgWidth = (AppDimens.ChatItemImageDimens -

(AppDimens.ChatItemGroupIconPaddingDimes * columnMax) -

AppDimens.ChatItemGroupChildIconMarginDimes) /

columnMax;

}

for (var i = 0; i < childCount; i++) {

icons.add(_weChatGroupChatChildIcon(avatars[i], imgWidth));

}

row = 0;

column = 0;

var centerTop = 0.0;

if (childCount == 2 || childCount == 5 || childCount == 6) {

centerTop = imgWidth / 2;

}

for (var i = 0; i < childCount; i++) {

var left =

imgWidth * row + AppDimens.ChatItemGroupIconPaddingDimes * (row + 1);

var top = imgWidth * column +

AppDimens.ChatItemGroupIconPaddingDimes * column +

centerTop;

switch (childCount) {

case 3:

case 7:

_topOneIcon(stacks, icons[i], childCount, i, imgWidth, left, top);

break;

case 5:

case 8:

_topTwoIcon(stacks, icons[i], childCount, i, imgWidth, left, top);

break;

default:

_otherIcon(

stacks, icons[i], childCount, i, imgWidth, left, top, columnMax);

break;

}

}

return Container(

width: AppDimens.ChatItemImageDimens,

height: AppDimens.ChatItemImageDimens,

color: Color(AppColors.DiverColor),

padding: EdgeInsets.only(

top: AppDimens.ChatItemGroupIconPaddingDimes,

),

alignment: AlignmentDirectional.bottomCenter,

child: Stack(

children: stacks,

),

);

}

}

_weChatGroupChatChildIcon(String avatar, double width) {

return Image.network(

avatar,

height: width,

width: width,

fit: BoxFit.fill,

);

}

// 顶部为一张图片

_topOneIcon(

List stacks, Widget child, int childCount, i, imgWidth, left, top) {

if (i == 0) {

var firstLeft =

imgWidth / 2 + left + AppDimens.ChatItemGroupChildIconMarginDimes / 2;

if (childCount == 7) {

firstLeft = imgWidth + left + AppDimens.ChatItemGroupChildIconMarginDimes;

}

stacks.add(Positioned(

child: child,

left: firstLeft,

));

row = 0;

// 换行

column++;

} else {

stacks.add(Positioned(

child: child,

left: left,

top: top,

));

// 换列

row++;

if (i == 3) {

// 第一例

row = 0;

// 换行

column++;

}

}

}

// 顶部为两张图片

_topTwoIcon(

List stacks, Widget child, int childCount, i, imgWidth, left, top) {

if (i == 0 || i == 1) {

stacks.add(Positioned(

child: child,

left:

imgWidth / 2 + left + AppDimens.ChatItemGroupChildIconMarginDimes / 2,

top: childCount == 5 ? top : 0.0,

));

row++;

if (i == 1) {

row = 0;

// 换行

column++;

}

} else {

stacks.add(Positioned(

child: child,

left: left,

top: top,

));

// 换列

row++;

if (i == 4) {

// 第一例

row = 0;

// 换行

column++;

}

}

}

_otherIcon(List stacks, Widget child, int childCount, i, imgWidth, left,

top, columnMax) {

stacks.add(Positioned(

child: child,

left: left,

top: top,

));

// 换列

row++;

if ((i + 1) % columnMax == 0) {

// 第一例

row = 0;

// 换行

column++;

}

}