Skip to content

Commit e9b1540

Browse files
jflin19990707jackjflin
jflin19990707
and
jackjflin
authored
SideBar增加自定义未选中颜色 (#723)
Co-authored-by: jackjflin <[email protected]>
1 parent 5f972c9 commit e9b1540

File tree

5 files changed

+262
-3
lines changed

5 files changed

+262
-3
lines changed

‎tdesign-component/example/lib/config.dart‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'page/sidebar/td_sidebar_page_icon.dart';
88
import 'page/sidebar/td_sidebar_page_loading.dart';
99
import 'page/sidebar/td_sidebar_page_outline.dart';
1010
import 'page/sidebar/td_sidebar_page_pagination.dart';
11+
import 'page/sidebar/td_sidebar_page_unselected_color.dart';
1112
import 'page/td_action_sheet_page.dart';
1213
import 'page/td_avatar_page.dart';
1314
import 'page/td_backtop_page.dart';
@@ -296,5 +297,10 @@ List<ExamplePageModel> sideBarExamplePage = [
296297
text: 'SideBar 延迟加载',
297298
name: 'SideBarLoading',
298299
isTodo: false,
299-
pageBuilder: _wrapInheritedTheme((context) => const TDSideBarLoadingPage()))
300+
pageBuilder: _wrapInheritedTheme((context) => const TDSideBarLoadingPage())),
301+
ExamplePageModel(
302+
text: 'SideBar 自定义未选中颜色',
303+
name: 'SideBarUnselectedColor',
304+
isTodo: false,
305+
pageBuilder: _wrapInheritedTheme((context) => const TDSideBarUnSelectedColorPage()))
300306
];

‎tdesign-component/example/lib/page/sidebar/td_sidebar_page.dart‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ class TDSideBarPageState extends State<TDSideBarPage> {
4848
test: [
4949
ExampleItem(
5050
desc: '延迟加载', ignoreCode: true, builder: _loadingSideBar),
51+
ExampleItem(
52+
desc: '自定义未选中颜色', ignoreCode: true, builder: _unSelectedColorSideBar),
5153
],
5254
);
5355
}
@@ -119,6 +121,20 @@ class TDSideBarPageState extends State<TDSideBarPage> {
119121
));
120122
}
121123

124+
Widget _unSelectedColorSideBar(BuildContext context) {
125+
return Padding(
126+
padding: const EdgeInsets.symmetric(horizontal: 16),
127+
child: Column(
128+
children: [
129+
CodeWrapper(
130+
builder: (_) =>
131+
getCustomButton(context, '未选中颜色自定义', 'SideBarUnselectedColor'),
132+
methodName: '_buildUnselectedColorSideBar',
133+
),
134+
],
135+
));
136+
}
137+
122138
TDButton getCustomButton(
123139
BuildContext context, String text, String routeName) {
124140
return TDButton(

‎tdesign-component/example/lib/page/sidebar/td_sidebar_page_unselected_color.dart‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:tdesign_flutter/tdesign_flutter.dart';
3+
4+
import '../../annotation/demo.dart';
5+
import '../../base/example_widget.dart';
6+
7+
///
8+
/// TDSideBarUnSelectedColorPage演示
9+
///
10+
class TDSideBarUnSelectedColorPage extends StatefulWidget {
11+
const TDSideBarUnSelectedColorPage({Key? key}) : super(key: key);
12+
13+
@override
14+
State<StatefulWidget> createState() {
15+
return TDSideBarUnSelectedColorPageState();
16+
}
17+
}
18+
19+
class TDSideBarUnSelectedColorPageState extends State<TDSideBarUnSelectedColorPage> {
20+
var currentValue = 1;
21+
var itemHeight = 278.5;
22+
var titleBarHeight = 44;
23+
var testButtonHeight = 80.0;
24+
final _demoScroller = ScrollController(initialScrollOffset: 278.5);
25+
final _sideBarController = TDSideBarController();
26+
static const threshold = 50;
27+
var lock = false;
28+
var list = <SideItemProps>[];
29+
final pages = <Widget>[];
30+
31+
@override
32+
void initState() {
33+
super.initState();
34+
35+
_demoScroller.addListener(() {
36+
if (lock) {
37+
return;
38+
}
39+
40+
var scrollTop = _demoScroller.offset;
41+
var index = (scrollTop + threshold) ~/ itemHeight;
42+
43+
if (currentValue != index) {
44+
setState(() {
45+
_sideBarController.selectTo(index);
46+
});
47+
}
48+
});
49+
50+
// 锚点用法
51+
52+
for (var i = 0; i < 20; i++) {
53+
list.add(SideItemProps(
54+
index: i,
55+
label: '选项',
56+
value: i,
57+
));
58+
pages.add(getAnchorDemo(i));
59+
}
60+
61+
list[1].badge = const TDBadge(TDBadgeType.redPoint);
62+
list[2].badge = const TDBadge(
63+
TDBadgeType.message,
64+
count: '8',
65+
);
66+
67+
_sideBarController.init(list);
68+
}
69+
70+
Future<void> onSelected(int value) async {
71+
if (currentValue != value) {
72+
setState(() {
73+
currentValue = value;
74+
});
75+
76+
lock = true;
77+
await _demoScroller.animateTo(value.toDouble() * itemHeight,
78+
duration: const Duration(milliseconds: 500), curve: Curves.easeIn);
79+
lock = false;
80+
}
81+
}
82+
83+
void onChanged(int value) {
84+
if(mounted){
85+
setState(() {
86+
currentValue = value;
87+
});
88+
}
89+
}
90+
91+
@override
92+
Widget build(BuildContext context) {
93+
var current = buildWidget(context);
94+
return current;
95+
}
96+
97+
Widget buildWidget(BuildContext context) {
98+
return ExamplePage(
99+
title: 'SideBar 自定义未选中颜色',
100+
exampleCodeGroup: 'sideBar',
101+
showSingleChild: true,
102+
singleChild: CodeWrapper(
103+
isCenter: false,
104+
builder: _buildUnselectedColorSideBar,
105+
));
106+
}
107+
108+
@Demo(group: 'sideBar')
109+
Widget _buildUnselectedColorSideBar(BuildContext context) {
110+
var demoHeight = MediaQuery.of(context).size.height -
111+
MediaQuery.of(context).padding.top -
112+
titleBarHeight - testButtonHeight;
113+
pages.add(Container(
114+
height: demoHeight - itemHeight,
115+
decoration: const BoxDecoration(color: Colors.white),
116+
));
117+
return Column(
118+
children: [
119+
Container(
120+
height: testButtonHeight,
121+
padding: const EdgeInsets.all(16),
122+
child: TDButton(text: '更新children',
123+
onTap: () {
124+
setState(() {
125+
var children = list
126+
.map((e) => SideItemProps(
127+
index: e.index,
128+
label: '变更',
129+
badge: e.badge,
130+
value: e.value,
131+
icon: e.icon))
132+
.toList();
133+
_sideBarController.children = children;
134+
setState(() {
135+
136+
});
137+
});
138+
},),
139+
),
140+
Row(
141+
children: [
142+
SizedBox(
143+
width: 110,
144+
child: TDSideBar(
145+
height: demoHeight,
146+
unSelectedColor: Colors.red,
147+
style: TDSideBarStyle.normal,
148+
value: currentValue,
149+
controller: _sideBarController,
150+
onChanged: onChanged,
151+
onSelected: onSelected,
152+
),
153+
),
154+
Expanded(
155+
child: SizedBox(
156+
height: demoHeight,
157+
child: SingleChildScrollView(
158+
controller: _demoScroller,
159+
child: Column(
160+
children: pages,
161+
),
162+
),
163+
))
164+
],
165+
)
166+
],
167+
);
168+
}
169+
170+
Widget getAnchorDemo(int index) {
171+
return Container(
172+
decoration: const BoxDecoration(color: Colors.white),
173+
child: Column(
174+
crossAxisAlignment: CrossAxisAlignment.start,
175+
children: [
176+
Padding(
177+
padding: const EdgeInsets.only(left: 20, top: 15, right: 9),
178+
child: TDText('标题$index',
179+
style: const TextStyle(
180+
fontSize: 14,
181+
)),
182+
),
183+
Padding(
184+
padding: const EdgeInsets.only(left: 20),
185+
child: displayImageList(),
186+
),
187+
],
188+
),
189+
);
190+
}
191+
192+
Widget displayImageList() {
193+
return Column(
194+
children: [
195+
displayImageItem(),
196+
const TDDivider(),
197+
displayImageItem(),
198+
const TDDivider(),
199+
displayImageItem(),
200+
const TDDivider(),
201+
],
202+
);
203+
}
204+
205+
Widget displayImageItem() {
206+
return Padding(
207+
padding: const EdgeInsets.symmetric(vertical: 16),
208+
child: Row(
209+
crossAxisAlignment: CrossAxisAlignment.center,
210+
children: const [
211+
TDImage(
212+
assetUrl: 'assets/img/empty.png',
213+
type: TDImageType.roundedSquare,
214+
width: 48,
215+
height: 48,
216+
),
217+
SizedBox(
218+
width: 16,
219+
),
220+
TDText(
221+
'标题',
222+
style: TextStyle(
223+
fontSize: 16,
224+
),
225+
)
226+
],
227+
),
228+
);
229+
}
230+
}

‎tdesign-component/lib/src/components/sidebar/td_sidebar.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ class TDSideBar extends StatefulWidget {
4545
this.loadingWidget,
4646
this.selectedBgColor,
4747
this.unSelectedBgColor,
48+
this.unSelectedColor,
4849
}) : super(key: key);
4950

5051
/// 选项值
@@ -65,6 +66,9 @@ class TDSideBar extends StatefulWidget {
6566
/// 选中值后颜色
6667
final Color? selectedColor;
6768

69+
/// 未选中颜色
70+
final Color? unSelectedColor;
71+
6872
/// 选中样式
6973
final TextStyle? selectedTextStyle;
7074

@@ -282,6 +286,7 @@ class _TDSideBarState extends State<TDSideBar> {
282286
textStyle: ele.textStyle,
283287
selected: currentIndex == ele.index,
284288
selectedColor:widget.selectedColor,
289+
unSelectedColor: widget.unSelectedColor,
285290
selectedTextStyle:widget.selectedTextStyle,
286291
contentPadding:widget.contentPadding,
287292
topAdjacent: currentIndex != null &&

‎tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ class TDWrapSideBarItem extends StatelessWidget {
2323
this.onTap,
2424
this.selectedBgColor,
2525
this.unSelectedBgColor,
26+
this.unSelectedColor,
2627
required this.style,
2728
}) : super(key: key);
2829

@@ -37,6 +38,7 @@ class TDWrapSideBarItem extends StatelessWidget {
3738
final bool selected;
3839
final Color? selectedColor;
3940
final Color? selectedBgColor;
41+
final Color? unSelectedColor;
4042
final Color? unSelectedBgColor;
4143
final bool topAdjacent;
4244
final bool bottomAdjacent;
@@ -151,7 +153,7 @@ class TDWrapSideBarItem extends StatelessWidget {
151153
? selectedTextStyle != null
152154
? selectedTextStyle?.color
153155
: (selectedColor ?? TDTheme.of(context).brandNormalColor)
154-
: Colors.black,
156+
: unSelectedColor ?? Colors.black,
155157
),
156158
));
157159
}
@@ -169,7 +171,7 @@ class TDWrapSideBarItem extends StatelessWidget {
169171
? TDTheme.of(context).fontGyColor4
170172
: selected
171173
? selectedColor ?? TDTheme.of(context).brandNormalColor
172-
: Colors.black,
174+
: unSelectedColor ?? Colors.black,
173175
// forceVerticalCenter: true,
174176
)),
175177
if(label.length<4)

0 commit comments

Comments
 (0)