Skip to content

Commit c9e13b8

Browse files
TecodeTecode
committed
'排行榜页面'
1 parent 2364c80 commit c9e13b8

File tree

3 files changed

+150
-46
lines changed

3 files changed

+150
-46
lines changed

‎lib/widgets/BookShelf/CarouselMap.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class CarouselMap extends StatelessWidget {
1010
enlargeCenterPage: true,
1111
aspectRatio: 2.0,
1212
onPageChanged: (int index) {
13-
print(index);
13+
// print(index);
1414
},
1515
viewportFraction: 0.40,
1616
items: [1, 2, 3, 4, 5].map((i) {

‎lib/widgets/Leaderboard/CrownAvatar.dart‎

Lines changed: 75 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,78 @@ import 'package:flutter_svg/svg.dart';
44

55
/// 头像的类型，包含有皇冠的和没有皇冠的
66
/// normal | crownLarge | crownSmall
7-
enum AvatarType {
8-
normal,
9-
crownLarge,
10-
crownSmall
11-
}
7+
enum AvatarType { normal, crownLarge, crownSmall }
8+
129
class CrownAvatar extends StatefulWidget {
1310
final AvatarType crownAvatarType;
1411
final int color;
12+
final String avatarUrl;
1513

1614
CrownAvatar(
17-
{@required this.crownAvatarType, this.color = AppColors.colorRed}) {
18-
switch (this.crownAvatarType) {
19-
case AvatarType.normal:
20-
// this.imageSize = 4;
21-
break;
22-
23-
default:
24-
}
25-
}
15+
{@required this.crownAvatarType,
16+
@required this.avatarUrl,
17+
this.color = AppColors.colorRed});
2618

2719
@override
2820
_CrownAvatarState createState() => _CrownAvatarState();
2921
}
3022

3123
class _CrownAvatarState extends State<CrownAvatar> {
32-
int imageSize = 75;
24+
double imageSize = 75.0;
25+
// 皇冠的宽高
26+
double crownWidth = 37.0;
27+
double crownHeight = 30.0;
28+
// 距离顶部的高度
29+
double crowTop = -18.0;
30+
// 圆圈的大小
31+
double circleSize = 18.0;
32+
// 圆圈里面的字体大小
33+
double circleFontSize = 14.0;
34+
double crownTextSize = 16.0;
3335

3436
@override
3537
Widget build(BuildContext context) {
38+
// 判断头像的类型给出对应的尺寸
39+
if (widget.crownAvatarType == AvatarType.crownLarge) {
40+
this.imageSize = 100.0;
41+
this.crownWidth = 67.0;
42+
this.crownHeight = 53.0;
43+
this.crowTop = -36.0;
44+
this.circleSize = 24.0;
45+
this.circleFontSize = 16.0;
46+
this.crownTextSize = 18.0;
47+
}
48+
// 返回有关注按钮的头像组件
49+
if (widget.crownAvatarType == AvatarType.normal) {
50+
return Container(
51+
margin: EdgeInsets.only(right: 24.0),
52+
child: Column(
53+
children: <Widget>[
54+
ClipRRect(
55+
borderRadius: BorderRadius.circular(40.0),
56+
child: Image.network(
57+
widget.avatarUrl,
58+
width: 60.0,
59+
height: 60.0,
60+
fit: BoxFit.cover,
61+
),
62+
),
63+
Text(
64+
"阿明",
65+
style:
66+
TextStyle(color: Color(AppColors.fontColor), fontSize: 16.0),
67+
),
68+
MaterialButton(
69+
onPressed: () {},
70+
child: Text("关注"),
71+
color: Color(AppColors.lightGray),
72+
)
73+
],
74+
),
75+
);
76+
}
3677
return Container(
37-
padding: EdgeInsets.only(top: 24.0),
78+
padding: EdgeInsets.only(top: 60.0, bottom: 37.0),
3879
child: Column(
3980
children: <Widget>[
4081
Stack(
@@ -43,48 +84,50 @@ class _CrownAvatarState extends State<CrownAvatar> {
4384
ClipRRect(
4485
borderRadius: BorderRadius.circular(100.0),
4586
child: Image.network(
46-
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
47-
width: 75.0,
48-
height: 75.0,
87+
widget.avatarUrl,
88+
width: imageSize,
89+
height: imageSize,
4990
fit: BoxFit.cover,
5091
),
5192
),
5293
Positioned(
53-
width: 75.0,
94+
width: imageSize,
5495
child: SvgPicture.asset(
5596
'assets/icon/icon_crown.svg',
56-
width: 37.0,
57-
height: 30.0,
97+
width: crownWidth,
98+
height: crownHeight,
5899
color: Color(widget.color),
59100
),
60-
top: -18.0,
101+
top: crowTop,
61102
left: 0)
62103
],
63104
),
64105
Row(
65106
mainAxisAlignment: MainAxisAlignment.center,
66107
children: <Widget>[
67108
Container(
68-
width: 18.0,
69-
height: 18.0,
109+
width: circleSize,
110+
height: circleSize,
70111
child: Align(
71112
alignment: Alignment.center,
72113
child: Text(
73114
"2",
74115
style: TextStyle(
75-
color: Color(AppColors.fontColor), fontSize: 14.0),
116+
color: Color(AppColors.fontColor),
117+
fontSize: circleFontSize),
76118
),
77119
),
78120
decoration: BoxDecoration(
79121
color: Color(widget.color),
80-
borderRadius: BorderRadius.circular(20.0)),
122+
borderRadius: BorderRadius.circular(40.0)),
81123
),
82124
SizedBox(
83125
width: 4.0,
84126
),
85127
Text(
86128
"大中华区",
87-
style: TextStyle(color: Color(widget.color), fontSize: 16.0),
129+
style: TextStyle(
130+
color: Color(widget.color), fontSize: crownTextSize),
88131
)
89132
],
90133
),
@@ -95,7 +138,8 @@ class _CrownAvatarState extends State<CrownAvatar> {
95138
child: Text(
96139
"46",
97140
style: TextStyle(
98-
color: Color(AppColors.fontColorGray), fontSize: 16.0),
141+
color: Color(AppColors.fontColorGray),
142+
fontSize: crownTextSize),
99143
),
100144
),
101145
SizedBox(
@@ -104,7 +148,8 @@ class _CrownAvatarState extends State<CrownAvatar> {
104148
Text(
105149
"关注者",
106150
style: TextStyle(
107-
color: Color(AppColors.fontColorGray), fontSize: 16.0),
151+
color: Color(AppColors.fontColorGray),
152+
fontSize: crownTextSize),
108153
)
109154
],
110155
),

‎lib/widgets/Leaderboard/LeaderboardContent.dart‎

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,80 @@ import 'package:flutter_book/widgets/common/CommonTitle.dart';
66
class LeaderboardContent extends StatelessWidget {
77
@override
88
Widget build(BuildContext context) {
9-
return Column(
10-
children: <Widget>[
11-
Row(
12-
mainAxisAlignment: MainAxisAlignment.spaceAround,
13-
children: List.generate(
14-
3,
15-
(int index) => CrownAvatar(
16-
crownAvatarType: AvatarType.normal,
17-
color: AppColors.colorRed,
18-
)),
19-
),
20-
CommonTitle(title: "热门排行"),
21-
CommonTitle(title: "最新作者"),
22-
CommonTitle(title: "其他作者"),
23-
],
9+
return Container(
10+
margin: EdgeInsets.symmetric(horizontal: Constants.pageMargin),
11+
child: ListView(
12+
children: <Widget>[
13+
Row(
14+
mainAxisAlignment: MainAxisAlignment.spaceAround,
15+
children: <Widget>[
16+
CrownAvatar(
17+
crownAvatarType: AvatarType.crownSmall,
18+
color: AppColors.colorRed,
19+
avatarUrl:
20+
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
21+
),
22+
CrownAvatar(
23+
crownAvatarType: AvatarType.crownLarge,
24+
color: AppColors.colorYellow,
25+
avatarUrl:
26+
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
27+
),
28+
CrownAvatar(
29+
crownAvatarType: AvatarType.crownSmall,
30+
color: AppColors.colorBlue,
31+
avatarUrl:
32+
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
33+
)
34+
],
35+
),
36+
CommonTitle(title: "热门排行"),
37+
Container(
38+
margin: EdgeInsets.symmetric(vertical: 24.0),
39+
height: 140.0,
40+
child: ListView(
41+
scrollDirection: Axis.horizontal,
42+
children: List.generate(
43+
10,
44+
(_) => CrownAvatar(
45+
crownAvatarType: AvatarType.normal,
46+
color: AppColors.colorYellow,
47+
avatarUrl:
48+
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
49+
))),
50+
),
51+
CommonTitle(title: "最新作者"),
52+
Container(
53+
margin: EdgeInsets.symmetric(vertical: 24.0),
54+
height: 140.0,
55+
child: ListView(
56+
scrollDirection: Axis.horizontal,
57+
children: List.generate(
58+
10,
59+
(_) => CrownAvatar(
60+
crownAvatarType: AvatarType.normal,
61+
color: AppColors.colorYellow,
62+
avatarUrl:
63+
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
64+
))),
65+
),
66+
CommonTitle(title: "其他作者"),
67+
Container(
68+
margin: EdgeInsets.symmetric(vertical: 24.0),
69+
height: 140.0,
70+
child: ListView(
71+
scrollDirection: Axis.horizontal,
72+
children: List.generate(
73+
10,
74+
(_) => CrownAvatar(
75+
crownAvatarType: AvatarType.normal,
76+
color: AppColors.colorYellow,
77+
avatarUrl:
78+
"http://admin.soscoon.com/uploadImages/0136afa3b04e2d754feaed525fa02f474dd08aa0.jpg",
79+
))),
80+
),
81+
],
82+
),
2483
);
2584
}
2685
}

0 commit comments

Comments
 (0)