SideBar增加自定义未选中颜色

tdesign-component/example/lib/config.dart

@@ -8,6 +8,7 @@ import 'page/sidebar/td_sidebar_page_icon.dart';
 import 'page/sidebar/td_sidebar_page_loading.dart';
 import 'page/sidebar/td_sidebar_page_outline.dart';
 import 'page/sidebar/td_sidebar_page_pagination.dart';
+import 'page/sidebar/td_sidebar_page_unselected_color.dart';
 import 'page/td_action_sheet_page.dart';
 import 'page/td_avatar_page.dart';
 import 'page/td_backtop_page.dart';
@@ -296,5 +297,10 @@ List<ExamplePageModel> sideBarExamplePage = [
       text: 'SideBar 延迟加载',
       name: 'SideBarLoading',
       isTodo: false,
-      pageBuilder: _wrapInheritedTheme((context) => const TDSideBarLoadingPage()))
+      pageBuilder: _wrapInheritedTheme((context) => const TDSideBarLoadingPage())),
+  ExamplePageModel(
+      text: 'SideBar 自定义未选中颜色',
+      name: 'SideBarUnselectedColor',
+      isTodo: false,
+      pageBuilder: _wrapInheritedTheme((context) => const TDSideBarUnSelectedColorPage()))
 ];

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

@@ -48,6 +48,8 @@ class TDSideBarPageState extends State<TDSideBarPage> {
         test: [
           ExampleItem(
               desc: '延迟加载', ignoreCode: true, builder: _loadingSideBar),
+          ExampleItem(
+              desc: '自定义未选中颜色', ignoreCode: true, builder: _unSelectedColorSideBar),
         ],
     );
   }
@@ -119,6 +121,20 @@ class TDSideBarPageState extends State<TDSideBarPage> {
         ));
   }
 
+  Widget _unSelectedColorSideBar(BuildContext context) {
+    return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        child: Column(
+          children: [
+            CodeWrapper(
+              builder: (_) =>
+                  getCustomButton(context, '未选中颜色自定义', 'SideBarUnselectedColor'),
+              methodName: '_buildUnselectedColorSideBar',
+            ),
+          ],
+        ));
+  }
+
   TDButton getCustomButton(
       BuildContext context, String text, String routeName) {
     return TDButton(

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

@@ -0,0 +1,230 @@
+import 'package:flutter/material.dart';
+import 'package:tdesign_flutter/tdesign_flutter.dart';
+
+import '../../annotation/demo.dart';
+import '../../base/example_widget.dart';
+
+///
+/// TDSideBarUnSelectedColorPage演示
+///
+class TDSideBarUnSelectedColorPage extends StatefulWidget {
+  const TDSideBarUnSelectedColorPage({Key? key}) : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() {
+    return TDSideBarUnSelectedColorPageState();
+  }
+}
+
+class TDSideBarUnSelectedColorPageState extends State<TDSideBarUnSelectedColorPage> {
+  var currentValue = 1;
+  var itemHeight = 278.5;
+  var titleBarHeight = 44;
+  var testButtonHeight = 80.0;
+  final _demoScroller = ScrollController(initialScrollOffset: 278.5);
+  final _sideBarController = TDSideBarController();
+  static const threshold = 50;
+  var lock = false;
+  var list = <SideItemProps>[];
+  final pages = <Widget>[];
+
+  @override
+  void initState() {
+    super.initState();
+
+    _demoScroller.addListener(() {
+      if (lock) {
+        return;
+      }
+
+      var scrollTop = _demoScroller.offset;
+      var index = (scrollTop + threshold) ~/ itemHeight;
+
+      if (currentValue != index) {
+        setState(() {
+          _sideBarController.selectTo(index);
+        });
+      }
+    });
+
+    // 锚点用法
+
+    for (var i = 0; i < 20; i++) {
+      list.add(SideItemProps(
+        index: i,
+        label: '选项',
+        value: i,
+      ));
+      pages.add(getAnchorDemo(i));
+    }
+
+    list[1].badge = const TDBadge(TDBadgeType.redPoint);
+    list[2].badge = const TDBadge(
+      TDBadgeType.message,
+      count: '8',
+    );
+
+    _sideBarController.init(list);
+  }
+
+  Future<void> onSelected(int value) async {
+    if (currentValue != value) {
+      setState(() {
+        currentValue = value;
+      });
+
+      lock = true;
+      await _demoScroller.animateTo(value.toDouble() * itemHeight,
+          duration: const Duration(milliseconds: 500), curve: Curves.easeIn);
+      lock = false;
+    }
+  }
+
+  void onChanged(int value) {
+    if(mounted){
+      setState(() {
+        currentValue = value;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var current = buildWidget(context);
+    return current;
+  }
+
+  Widget buildWidget(BuildContext context) {
+    return ExamplePage(
+        title: 'SideBar 自定义未选中颜色',
+        exampleCodeGroup: 'sideBar',
+        showSingleChild: true,
+        singleChild: CodeWrapper(
+          isCenter: false,
+          builder: _buildUnselectedColorSideBar,
+        ));
+  }
+
+  @Demo(group: 'sideBar')
+  Widget _buildUnselectedColorSideBar(BuildContext context) {
+    var demoHeight = MediaQuery.of(context).size.height -
+        MediaQuery.of(context).padding.top -
+        titleBarHeight - testButtonHeight;
+    pages.add(Container(
+      height: demoHeight - itemHeight,
+      decoration: const BoxDecoration(color: Colors.white),
+    ));
+    return Column(
+      children: [
+        Container(
+          height: testButtonHeight,
+          padding: const EdgeInsets.all(16),
+          child: TDButton(text: '更新children',
+            onTap: () {
+              setState(() {
+                var children = list
+                    .map((e) => SideItemProps(
+                    index: e.index,
+                    label: '变更',
+                    badge: e.badge,
+                    value: e.value,
+                    icon: e.icon))
+                    .toList();
+                _sideBarController.children = children;
+                setState(() {
+
+                });
+              });
+            },),
+        ),
+        Row(
+          children: [
+            SizedBox(
+              width: 110,
+              child: TDSideBar(
+                height: demoHeight,
+                unSelectedColor: Colors.red,
+                style: TDSideBarStyle.normal,
+                value: currentValue,
+                controller: _sideBarController,
+                onChanged: onChanged,
+                onSelected: onSelected,
+              ),
+            ),
+            Expanded(
+                child: SizedBox(
+                  height: demoHeight,
+                  child: SingleChildScrollView(
+                    controller: _demoScroller,
+                    child: Column(
+                      children: pages,
+                    ),
+                  ),
+                ))
+          ],
+        )
+      ],
+    );
+  }
+
+  Widget getAnchorDemo(int index) {
+    return Container(
+      decoration: const BoxDecoration(color: Colors.white),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(left: 20, top: 15, right: 9),
+            child: TDText('标题$index',
+                style: const TextStyle(
+                  fontSize: 14,
+                )),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(left: 20),
+            child: displayImageList(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget displayImageList() {
+    return Column(
+      children: [
+        displayImageItem(),
+        const TDDivider(),
+        displayImageItem(),
+        const TDDivider(),
+        displayImageItem(),
+        const TDDivider(),
+      ],
+    );
+  }
+
+  Widget displayImageItem() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 16),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: const [
+          TDImage(
+            assetUrl: 'assets/img/empty.png',
+            type: TDImageType.roundedSquare,
+            width: 48,
+            height: 48,
+          ),
+          SizedBox(
+            width: 16,
+          ),
+          TDText(
+            '标题',
+            style: TextStyle(
+              fontSize: 16,
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

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

@@ -45,6 +45,7 @@ class TDSideBar extends StatefulWidget {
     this.loadingWidget,
     this.selectedBgColor,
     this.unSelectedBgColor,
+    this.unSelectedColor,
   }) : super(key: key);
 
   /// 选项值
@@ -65,6 +66,9 @@ class TDSideBar extends StatefulWidget {
   /// 选中值后颜色
   final Color? selectedColor;
 
+  /// 未选中颜色
+  final Color? unSelectedColor;
+
   /// 选中样式
   final TextStyle? selectedTextStyle;
 
@@ -282,6 +286,7 @@ class _TDSideBarState extends State<TDSideBar> {
                         textStyle: ele.textStyle,
                         selected: currentIndex == ele.index,
                         selectedColor:widget.selectedColor,
+                        unSelectedColor: widget.unSelectedColor,
                         selectedTextStyle:widget.selectedTextStyle,
                         contentPadding:widget.contentPadding,
                         topAdjacent: currentIndex != null &&

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

@@ -23,6 +23,7 @@ class TDWrapSideBarItem extends StatelessWidget {
     this.onTap,
     this.selectedBgColor,
     this.unSelectedBgColor,
+    this.unSelectedColor,
     required this.style,
   }) : super(key: key);
 
@@ -37,6 +38,7 @@ class TDWrapSideBarItem extends StatelessWidget {
   final bool selected;
   final Color? selectedColor;
   final Color? selectedBgColor;
+  final Color? unSelectedColor;
   final Color? unSelectedBgColor;
   final bool topAdjacent;
   final bool bottomAdjacent;
@@ -151,7 +153,7 @@ class TDWrapSideBarItem extends StatelessWidget {
                     ? selectedTextStyle != null
                         ? selectedTextStyle?.color
                         : (selectedColor ?? TDTheme.of(context).brandNormalColor)
-                    : Colors.black,
+                    : unSelectedColor ?? Colors.black,
           ),
         ));
   }
@@ -169,7 +171,7 @@ class TDWrapSideBarItem extends StatelessWidget {
                     ? TDTheme.of(context).fontGyColor4
                     : selected
                     ? selectedColor ?? TDTheme.of(context).brandNormalColor
-                    : Colors.black,
+                    : unSelectedColor ?? Colors.black,
                 // forceVerticalCenter: true,
               )),
           if(label.length<4)