Merge pull request #217 from shinyina/feature/swtich-custom-fontsize

feat(TDSwitch): 添加自定义“开/关”字体大小
Tencent · Aug 24, 2024 · b2b0be5 · b2b0be5
2 parents f856680 + e14789e
commit b2b0be5
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 44 deletions.
diff --git a/tdesign-component/example/assets/api/switch_api.md b/tdesign-component/example/assets/api/switch_api.md
@@ -13,6 +13,8 @@
 | trackOffColor | Color? | - | 关闭时轨道颜色 |
 | thumbContentOnColor | Color? | - | 开启时ThumbView的颜色 |
 | thumbContentOffColor | Color? | - | 关闭时ThumbView的颜色 |
+| thumbContentOnFont | TextStyle? | - | 开启时ThumbView的字体样式 |
+| thumbContentOffFont | TextStyle? | - | 关闭时ThumbView的字体样式 |
 | onChanged | OnSwitchChanged? | - | 改变事件 |
 | openText | String? | - | 打开文案 |
 | closeText | String? | - | 关闭文案 |
diff --git a/tdesign-component/example/assets/code/switch._customTextFont.txt b/tdesign-component/example/assets/code/switch._customTextFont.txt
@@ -0,0 +1,16 @@
+
+  Widget _customTextFont(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        type: TDSwitchType.text,
+        openText: '开',
+        closeText: '关',
+        thumbContentOffColor: Colors.red,
+        thumbContentOnColor: Colors.green,
+        thumbContentOnFont: TextStyle(fontSize: 18),
+        thumbContentOffFont: TextStyle(fontSize: 12),
+      ),
+      title: '基础开关',
+    );
+  }
diff --git a/tdesign-component/example/lib/page/td_switch_page.dart b/tdesign-component/example/lib/page/td_switch_page.dart
@@ -20,34 +20,36 @@ class TDSwitchPageState extends State<TDSwitchPage> {
   @override
   Widget build(BuildContext context) {
     var current = ExamplePage(
-        title: tdTitle(),
-        exampleCodeGroup: 'switch',
-        desc: '用于控制某个功能的开启和关闭。',
-        children: [
-          ExampleModule(
-            title: '组件类型',
-            children: [
-              ExampleItem(desc: '基础开关', builder: _buildSwitchWithBase),
-              ExampleItem(desc: '带描述开关', builder: _buildSwitchWithText),
-              ExampleItem(builder: _buildSwitchWithIcon),
-              ExampleItem(desc: '自定义颜色开关', builder: _buildSwitchWithColor),
-            ],
-          ),
-          ExampleModule(title: '组件状态', children: [
-            ExampleItem(desc: '加载状态', builder: _buildSwitchWithLoadingOff),
-            ExampleItem(builder: _buildSwitchWithLoadingOn),
-            ExampleItem(desc: '禁用状态', builder: _buildSwitchWithDisableOff),
-            ExampleItem(builder: _buildSwitchWithDisableOn),
-          ]),
-          ExampleModule(title: '组件样式', children: [
-            ExampleItem(desc: '开关尺寸', builder: _buildSwitchWithSizeLarge),
-            ExampleItem(builder: _buildSwitchWithSizeMed),
-            ExampleItem(builder: _buildSwitchWithSizeSmall),
-          ]),
-        ],
-    test: [
-      ExampleItem(desc: '自定义开关文案-通常只支持一个字符,超出部分无法展示', builder: _customText),
-    ],);
+      title: tdTitle(),
+      exampleCodeGroup: 'switch',
+      desc: '用于控制某个功能的开启和关闭。',
+      children: [
+        ExampleModule(
+          title: '组件类型',
+          children: [
+            ExampleItem(desc: '基础开关', builder: _buildSwitchWithBase),
+            ExampleItem(desc: '带描述开关', builder: _buildSwitchWithText),
+            ExampleItem(builder: _buildSwitchWithIcon),
+            ExampleItem(desc: '自定义颜色开关', builder: _buildSwitchWithColor),
+          ],
+        ),
+        ExampleModule(title: '组件状态', children: [
+          ExampleItem(desc: '加载状态', builder: _buildSwitchWithLoadingOff),
+          ExampleItem(builder: _buildSwitchWithLoadingOn),
+          ExampleItem(desc: '禁用状态', builder: _buildSwitchWithDisableOff),
+          ExampleItem(builder: _buildSwitchWithDisableOn),
+        ]),
+        ExampleModule(title: '组件样式', children: [
+          ExampleItem(desc: '开关尺寸', builder: _buildSwitchWithSizeLarge),
+          ExampleItem(builder: _buildSwitchWithSizeMed),
+          ExampleItem(builder: _buildSwitchWithSizeSmall),
+        ]),
+      ],
+      test: [
+        ExampleItem(desc: '自定义开关文案-通常只支持一个字符,超出部分无法展示', builder: _customText),
+        ExampleItem(desc: '自定义带文字开关的字体大小', builder: _customTextFont),
+      ],
+    );
     return current;
   }
 
@@ -295,4 +297,21 @@ class TDSwitchPageState extends State<TDSwitchPage> {
       title: '基础开关',
     );
   }
+
+  @Demo(group: 'switch')
+  Widget _customTextFont(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        type: TDSwitchType.text,
+        openText: '开',
+        closeText: '关',
+        thumbContentOffColor: Colors.red,
+        thumbContentOnColor: Colors.green,
+        thumbContentOnFont: TextStyle(fontSize: 18),
+        thumbContentOffFont: TextStyle(fontSize: 12),
+      ),
+      title: '基础开关',
+    );
+  }
 }
diff --git a/tdesign-component/lib/src/components/switch/td_switch.dart b/tdesign-component/lib/src/components/switch/td_switch.dart
@@ -24,9 +24,11 @@ class TDSwitch extends StatefulWidget {
     this.trackOffColor,
     this.thumbContentOnColor,
     this.thumbContentOffColor,
+    this.thumbContentOnFont,
+    this.thumbContentOffFont,
     this.onChanged,
     this.openText,
-     this.closeText,
+    this.closeText,
   }) : super(key: key);
 
   /// 是否可点击
@@ -47,6 +49,12 @@ class TDSwitch extends StatefulWidget {
   /// 关闭时ThumbView的颜色
   final Color? thumbContentOffColor;
 
+  /// 开启时ThumbView的字体样式
+  final TextStyle? thumbContentOnFont;
+
+  /// 关闭时ThumbView的字体样式
+  final TextStyle? thumbContentOffFont;
+
   /// 尺寸：大、中、小
   final TDSwitchSize? size;
 
@@ -89,8 +97,12 @@ class TDSwitchState extends State<TDSwitch> {
     final switchEnable = widget.enable && widget.type != TDSwitchType.loading;
     final trackOnColor = widget.trackOnColor ?? theme.brandColor7;
     final trackOffColor = widget.trackOffColor ?? theme.grayColor4;
-    final thumbContentOnColor = widget.thumbContentOnColor ?? theme.brandNormalColor;
-    final thumbContentOffColor = widget.thumbContentOffColor ?? theme.fontGyColor4;
+    final thumbContentOnColor =
+        widget.thumbContentOnColor ?? theme.brandNormalColor;
+    final thumbContentOffColor =
+        widget.thumbContentOffColor ?? theme.fontGyColor4;
+    final thumbContentOnFont = widget.thumbContentOnFont ?? const TextStyle(fontSize: 14);
+    final thumbContentOffFont = widget.thumbContentOffFont ?? const TextStyle(fontSize: 14);
     Widget current = TDCupertinoSwitch(
       value: isOn,
       activeColor: trackOnColor,
@@ -103,7 +115,7 @@ class TDSwitchState extends State<TDSwitch> {
           setState(() {});
         }
       },
-      thumbView: _getThumbView(thumbContentOnColor, thumbContentOffColor),
+      thumbView: _getThumbView(thumbContentOnColor, thumbContentOffColor,thumbContentOnFont, thumbContentOffFont),
     );
     if (!switchEnable) {
       current = Opacity(
@@ -150,20 +162,25 @@ class TDSwitchState extends State<TDSwitch> {
     }
   }
 
-  Widget? _getThumbView(Color thumbContentOnColor, Color thumbContentOffColor) {
+  Widget? _getThumbView(Color thumbContentOnColor, Color thumbContentOffColor, TextStyle thumbContentOnFont, TextStyle thumbContentOffFont) {
     switch (widget.type) {
       case TDSwitchType.text:
         return Stack(
-          children: [Container(
-            alignment: Alignment.center,
-            width: 16,
-            child: TDText(
-              isOn ? (widget.openText ?? context.resource.open) : (widget.closeText ?? context.resource.close),
-              style: TextStyle(color: isOn ? thumbContentOnColor : thumbContentOffColor, fontSize: 14),
-              forceVerticalCenter: true,
-              maxLines: 1,
-            ),
-          )],
+          children: [
+            Container(
+              alignment: Alignment.center,
+              width: 16,
+              child: TDText(
+                isOn
+                    ? (widget.openText ?? context.resource.open)
+                    : (widget.closeText ?? context.resource.close),
+                textColor: isOn ? thumbContentOnColor : thumbContentOffColor,
+                forceVerticalCenter: true,
+                maxLines: 1,
+                style: isOn ? thumbContentOnFont : thumbContentOffFont,
+              ),
+            )
+          ],
         );
       case TDSwitchType.loading:
         return Container(
@@ -178,7 +195,8 @@ class TDSwitchState extends State<TDSwitch> {
         return Container(
           alignment: Alignment.centerLeft,
           child: Icon(isOn ? TDIcons.check : TDIcons.close,
-              size: 16, color: isOn ? thumbContentOnColor : thumbContentOffColor),
+              size: 16,
+              color: isOn ? thumbContentOnColor : thumbContentOffColor),
         );
       case TDSwitchType.fill:
       default: