新增选中样式，以及自定义文本边距

Tencent · May 27, 2024 · 68665fe · 68665fe
1 parent 704dc2d
commit 68665fe
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/tdesign-component/example/lib/page/sidebar/td_sidebar_page_custom.dart b/tdesign-component/example/lib/page/sidebar/td_sidebar_page_custom.dart
@@ -86,7 +86,9 @@ class TDSideBarCustomPageState extends State<TDSideBarCustomPage> {
                     textStyle: ele.textStyle,
                     icon: ele.icon))
                 .toList(),
+            selectedTextStyle:TextStyle(color: Colors.red),
             onSelected: setCurrentValue,
+            contentPadding:EdgeInsets.only(left: 16, top: 16,bottom: 16),
           ),
         ),
         Expanded(

diff --git a/tdesign-component/lib/src/components/sidebar/td_sidebar.dart b/tdesign-component/lib/src/components/sidebar/td_sidebar.dart
@@ -32,11 +32,14 @@ class TDSideBar extends StatefulWidget {
     Key? key,
     this.value,
     this.defaultValue,
+    this.selectedColor,
     this.children = const [],
     this.onChanged,
     this.onSelected,
     this.height,
     this.controller,
+    this.contentPadding,
+    this.selectedTextStyle,
     this.style = TDSideBarStyle.normal,
   }) : super(key: key);
 
@@ -55,12 +58,21 @@ class TDSideBar extends StatefulWidget {
   /// 选中值发生变化（点击事件）
   final ValueChanged<int>? onSelected;
 
+  /// 选中值后颜色
+  final Color? selectedColor;
+
+  /// 选中样式
+  final TextStyle? selectedTextStyle;
+
   /// 样式
   final TDSideBarStyle style;
 
   /// 高度
   final double? height;
 
+  /// 自定义文本框内边距
+  final EdgeInsetsGeometry? contentPadding;
+
   /// 控制器
   final TDSideBarController? controller;
 
@@ -202,6 +214,9 @@ class _TDSideBarState extends State<TDSideBar> {
                         badge: ele.badge,
                         textStyle: ele.textStyle,
                         selected: currentIndex == ele.index,
+                        selectedColor:widget.selectedColor,
+                        selectedTextStyle:widget.selectedTextStyle,
+                        contentPadding:widget.contentPadding,
                         topAdjacent: currentIndex != null &&
                             currentIndex! + 1 == ele.index,
                         bottomAdjacent: currentIndex != null &&

diff --git a/tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart b/tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart
@@ -9,12 +9,15 @@ class TDWrapSideBarItem extends StatelessWidget {
     required this.disabled,
     this.icon,
     this.label = '',
+    this.contentPadding,
     this.textStyle = const TextStyle(
       fontSize: 16,
       height: 1.5,
     ),
+    this.selectedTextStyle,
     this.value = -1,
     this.selected = false,
+    this.selectedColor,
     this.topAdjacent = false,
     this.bottomAdjacent = false,
     this.onTap,
@@ -25,9 +28,12 @@ class TDWrapSideBarItem extends StatelessWidget {
   final bool disabled;
   final IconData? icon;
   final String label;
+  final EdgeInsetsGeometry? contentPadding;
   final TextStyle? textStyle;
+  final TextStyle? selectedTextStyle;
   final int value;
   final bool selected;
+  final Color? selectedColor;
   final bool topAdjacent;
   final bool bottomAdjacent;
   final VoidCallback? onTap;
@@ -39,24 +45,20 @@ class TDWrapSideBarItem extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: onTap,
-      child: style == TDSideBarStyle.normal
-          ? renderNormalItem(context)
-          : renderOutlineItem(context),
+      child: style == TDSideBarStyle.normal ? renderNormalItem(context) : renderOutlineItem(context),
     );
   }
 
   Widget renderNormalItem(BuildContext context) {
     return Container(
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
         color: Colors.white,
       ),
       child: ConstrainedBox(
         constraints: const BoxConstraints(minHeight: 56),
         child: Container(
           decoration: BoxDecoration(
-              color: selected
-                  ? Colors.white
-                  : const Color.fromRGBO(246, 246, 246, 1),
+              color: selected ? Colors.white : const Color.fromRGBO(246, 246, 246, 1),
               borderRadius: bottomAdjacent || topAdjacent
                   ? bottomAdjacent
                       ? const BorderRadius.only(bottomRight: Radius.circular(9))
@@ -67,7 +69,7 @@ class TDWrapSideBarItem extends StatelessWidget {
               renderPreLine(context),
               Expanded(
                   child: Padding(
-                padding: const EdgeInsets.all(16),
+                padding: contentPadding ?? const EdgeInsets.all(16),
                 child: renderMainContent(context),
               ))
             ],
@@ -82,14 +84,12 @@ class TDWrapSideBarItem extends StatelessWidget {
         constraints: const BoxConstraints(minHeight: 56),
         child: Container(
           height: 56,
-          decoration:
-              const BoxDecoration(color: Color.fromRGBO(246, 246, 246, 1)),
+          decoration: const BoxDecoration(color: Color.fromRGBO(246, 246, 246, 1)),
           child: Padding(
             padding: const EdgeInsets.all(8),
             child: Container(
               decoration: BoxDecoration(
-                  color: selected && !disabled ? Colors.white : null,
-                  borderRadius: BorderRadius.circular(6)),
+                  color: selected && !disabled ? Colors.white : null, borderRadius: BorderRadius.circular(6)),
               child: Padding(
                 padding: const EdgeInsets.all(8),
                 child: renderMainContent(context),
@@ -125,7 +125,9 @@ class TDWrapSideBarItem extends StatelessWidget {
               width: preLineWidth,
               height: 14,
               decoration: BoxDecoration(
-                  color: TDTheme.of(context).brandNormalColor,
+                  color: selectedTextStyle != null
+                      ? selectedTextStyle?.color
+                      : (selectedColor ?? TDTheme.of(context).brandNormalColor),
                   borderRadius: BorderRadius.circular(4)),
             )
           ],
@@ -143,7 +145,9 @@ class TDWrapSideBarItem extends StatelessWidget {
             color: disabled
                 ? TDTheme.of(context).fontGyColor4
                 : selected
-                    ? TDTheme.of(context).brandNormalColor
+                    ? selectedTextStyle != null
+                        ? selectedTextStyle?.color
+                        : (selectedColor ?? TDTheme.of(context).brandNormalColor)
                     : Colors.black,
           ),
         ));
@@ -156,13 +160,12 @@ class TDWrapSideBarItem extends StatelessWidget {
           WidgetSpan(
               child: TDText(
             label,
-            style: textStyle,
-            fontWeight:
-                selected && !disabled ? FontWeight.w600 : FontWeight.w400,
+            style: selected ? (selectedTextStyle ?? TextStyle(color: selectedColor)) : textStyle,
+            fontWeight: selected && !disabled ? FontWeight.w600 : FontWeight.w400,
             textColor: disabled
                 ? TDTheme.of(context).fontGyColor4
                 : selected
-                    ? TDTheme.of(context).brandNormalColor
+                    ? selectedColor ?? TDTheme.of(context).brandNormalColor
                     : Colors.black,
             forceVerticalCenter: true,
           )),
@@ -172,9 +175,7 @@ class TDWrapSideBarItem extends StatelessWidget {
             height: 16,
             child: Stack(
               clipBehavior: Clip.none,
-              children: [
-                badge != null ? Positioned(top: -6, child: badge!) : Container()
-              ],
+              children: [badge != null ? Positioned(top: -6, child: badge!) : Container()],
             ),
           ))
         ],