df_tab_bar.dart
4.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import 'package:doublefeel_flutter/core/theme/app_theme.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
import 'package:flutter/material.dart';
class DfTabBar extends StatelessWidget {
final int selectedIndex;
final ValueChanged<int> onTap;
const DfTabBar({
super.key,
required this.selectedIndex,
required this.onTap,
});
static const _selectedBgColor = Color(0xFFF3F3F3);
static const _tabIcons = [
'assets/images/tabbar/icon_today.png',
'assets/images/tabbar/icon_trend.png',
'assets/images/tabbar/icon_friends.png',
'assets/images/tabbar/icon_my.png',
];
static const _selectedTabIcons = [
'assets/images/tabbar/icon_today_selected.png',
'assets/images/tabbar/icon_trend_selected.png',
'assets/images/tabbar/icon_friends_selected.png',
'assets/images/tabbar/icon_my_selected.png',
];
@override
Widget build(BuildContext context) {
final l10n = context.l10n;
final tabLabels = [
l10n.tabToday,
l10n.tabTrend,
l10n.tabFriends,
l10n.tabMy,
];
return SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
child: Container(
height: 56,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(28),
boxShadow: const [
BoxShadow(
color: Color(0x33000000), // rgba(0,0,0,0.2)
blurRadius: 24,
offset: Offset(0, 6),
),
],
),
child: Padding(
padding: const EdgeInsets.all(4),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / _tabIcons.length;
return Stack(
clipBehavior: Clip.none,
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: selectedIndex * tabWidth,
top: 0,
bottom: 0,
width: tabWidth,
child: const DecoratedBox(
decoration: BoxDecoration(
color: _selectedBgColor,
borderRadius: BorderRadius.all(Radius.circular(24)),
),
),
),
Row(
children: List.generate(_tabIcons.length, (i) {
final isSelected = selectedIndex == i;
return Expanded(
child: RepaintBoundary(
child: GestureDetector(
onTap: () => onTap(i),
behavior: HitTestBehavior.opaque,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
isSelected
? _selectedTabIcons[i]
: _tabIcons[i],
width: 24,
height: 24,
gaplessPlayback: true,
),
const SizedBox(height: 2),
Text(
tabLabels[i],
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w500,
color: isSelected
? context.colors.primary
: context.colors.textSecondary,
height: 1.4,
),
),
],
),
),
),
);
}),
),
],
);
},
),
),
),
),
);
}
}