发布0.1.4版本

tdesign-component/CHANGELOG.md

@@ -1,4 +1,38 @@
-// TODO: TDBottoomBar
+## 🌈 0.1.4 `2024-04-08`
+
+### 🚀 Features
+- `TDCountDown`:
+  - add: Added TDCountDown countdown component @hkaikai
+- `TDTheme`:
+  - add: Modified the theme implementation method, supporting ref attribute for custom mapping
+  - add: Added default number font numberFontFamily
+- `TDText`:
+  - add: Added TDText force center switch kTextForceVerticalCenterEnable, which can globally disable forced centering to prevent excessive text offset after flutter 3.16 version ([#35](https://github.com/Tencent/tdesign-flutter/issues/35))
+- `TDBottomTabBar`:
+  - add: Added custom background color feature ([#55](https://github.com/Tencent/tdesign-flutter/issues/55))
+- `TDCheckbox`:
+  - add: TDCheckbox and TDRadio support custom colors ([#57](https://github.com/Tencent/tdesign-flutter/issues/57))
+  - add: TDCheckbox and TDRadio support custom font sizes ([#66](https://github.com/Tencent/tdesign-flutter/issues/66))
+- `TDTabBar`:
+  - add: TDTabBar adds custom settings for divider color and height ([#71](https://github.com/Tencent/tdesign-flutter/issues/71))
+- `TDSwitch`:
+  - add: TDSwitch supports custom "on/off" text ([#73](https://github.com/Tencent/tdesign-flutter/issues/73))
+- `TDDialog`:
+  - add: Added custom title alignment and content Widget feature ([#58](https://github.com/Tencent/tdesign-flutter/issues/58))
+
+### 🐞 Bug Fixes
+- `TDSlider`:
+  - fix: Fixed an issue where TDSlider setting showThumbValue does not work.
+- `TDButton`:
+  - fix: Fixed an issue where the external setting of the theme color for TDButton does not take effect ([#54](https://github.com/Tencent/tdesign-flutter/issues/54))
+- `TDInput`:
+  - fix: Fixed an issue where TDInput's showBottomDivider does not work ([#70](https://github.com/Tencent/tdesign-flutter/issues/70))
+  - fix: Removed the invalid height API of TDInput, use SizedBox to modify the height ([#70](https://github.com/Tencent/tdesign-flutter/issues/70))
+
+### 🚧 Others
+- Example application, added a button to modify the theme, can quickly modify the theme color
+
+
 ## 🌈 0.1.3 `2024-03-15`
 
 ### 🚀 Features

tdesign-component/README.md

@@ -55,4 +55,10 @@ flutter: ">=3.7.0"
 
 # Open source agreement:
 
-TDesign is licensed under the [MIT LICENSE](https://github.com/Tencent/tdesign-flutter/blob/main/tdesign-component/LICENSE)
+TDesign is licensed under the [MIT LICENSE](https://github.com/Tencent/tdesign-flutter/blob/main/tdesign-component/LICENSE)
+
+
+# Acknowledgements
+TDesign Flutter depends on the following component libraries. We appreciate the authors for their open-source contributions:
+[flutter_easyrefresh](https://pub-web.flutter-io.cn/packages/easy_refresh)
+[flutter_swiper](https://pub-web.flutter-io.cn/packages/flutter_swiper)

tdesign-component/README_zh.md

@@ -38,6 +38,7 @@
 
 # 自定义主题
 
+## 基础用法
 设置自定义主题的方式:
 ```
     MaterialApp(
@@ -66,6 +67,31 @@
   ''';
 ```
 
+## 主题生成器
+如果你不想自定义太多颜色,但是想要拥有好看的自定义主题,"主题生成器"是个不错的选择.
+
+1.进入[TDesign官网](https://tdesign.tencent.com/vue/custom-theme) ,点击下方的主题生成器,然后再右边生成器里选择想要的颜色,点击下载
+
+![img.png](../tdesign-site/site/public/assets/theme_generator.png)
+
+![img.png](../tdesign-site/site/public/assets/select_color.png)
+
+2.此时你得到是一个theme.css文件,可以将该文件放到tdesign-component/example/shell/theme/文件夹下,把该文件夹下的css2JsonTheme.dart修改为你自己的文件名、主题名和输出路径,即可得到一个theme.json文件
+![img.png](../tdesign-site/site/public/assets/dart_modify.png)
+
+3.将主题json加载进TDTheme,美观的自定义主题就设置完成了.
+```
+    var jsonString = await rootBundle.loadString('assets/theme.json');
+    var _themeData = TDThemeData.fromJson('green', jsonString);
+    // ……
+    MaterialApp(
+      title: 'TDesign Flutter Example',
+      theme: ThemeData(
+      extensions: [_themeData],
+      home: MyHomePage(title: 'TDesign Flutter 组件库'),
+    );
+```
+
 # 开发规范
 - 组件命名规范：以TD为前缀，组件名称、API名称参考TDesign现有组件和API命名，可以根据flutter原生Widget的特点进行修改。组件API以满足设计要求和使用为准，可根据flutter特点做精简或定制。
 - 组件库用到的所有色值、圆角、字体字号等样式属性需全部定义在主题中。
@@ -85,6 +111,11 @@
 - 单元测试：添加未在示例稿中体现，但有必要验证的组件样式，请添加到ExamplePage的'test'参数中。
 - 合并代码: 上述检查完成后，请发起pr，合并到dev分支，并同步项目组验收。
 
+## 常见问题
+
+- Flutter 3.16之后,修改了渲染引擎,导致启用forceVerticalCenter参数的组件字体偏移更多,不再居中.可以通过设置kTextForceVerticalCenterEnable=false来禁用字体居中功能,让组件显示与官方Text一致
+
+
 # SDK依赖版本
 dart: ">=2.19.0 <4.0.0"
 
@@ -102,4 +133,9 @@ flutter: ">=3.7.0"
 
 # 开源协议
 
-TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesing-flutter/blob/main/tdesign-component/LICENSE)
+TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesing-flutter/blob/main/tdesign-component/LICENSE)
+
+# 致谢
+TDesign Flutter 依赖以下组件库,感谢作者的开源贡献:
+[flutter_easyrefresh](https://pub-web.flutter-io.cn/packages/easy_refresh)
+[flutter_swiper](https://pub-web.flutter-io.cn/packages/flutter_swiper)

tdesign-component/example/assets/api/button_api.md

@@ -36,7 +36,7 @@
 | child | Widget? | - | 自控件 |
 | disabled | bool | false | 禁止点击 |
 | isBlock | bool | false | 是否为通栏按钮 |
-| style | TDButtonStyle? | - | 自定义样式，有则优先用它，没有则根据type和theme选取 |
+| style | TDButtonStyle? | - | 自定义样式，有则优先用它，没有则根据type和theme选取.如果设置了style,则activeStyle和disableStyle也应该设置 |
 | activeStyle | TDButtonStyle? | - | 自定义点击样式，有则优先用它，没有则根据type和theme选取 |
 | disableStyle | TDButtonStyle? | - | 自定义禁用样式，有则优先用它，没有则根据type和theme选取 |
 | textStyle | TextStyle? | - | 自定义可点击状态文本样式 |

tdesign-component/example/assets/api/checkbox_api.md

@@ -8,6 +8,8 @@
 | key |  | - |  |
 | title | String? | - | 文本 |
 | subTitle | String? | - | 辅助文字 |
+| titleFont | Font? | - | 标题字体大小 |
+| subTitleFont | Font? | - | 副标题字体大小 |
 | enable | bool | true | 不可用 |
 | checked | bool | false | 选中状态。默认为`false` |
 | titleMaxLine | int? | - | 标题的行数 |
@@ -18,6 +20,8 @@
 | style | TDCheckboxStyle? | - | 复选框样式：圆形或方形 |
 | spacing | double? | - | icon和文字的距离 |
 | backgroundColor | Color? | - | 背景颜色 |
+| selectColor | Color? | - | 选择颜色 |
+| disableColor | Color? | - | 禁用选择颜色 |
 | size | TDCheckBoxSize | TDCheckBoxSize.small | 复选框大小 |
 | cardMode | bool | false | 展示为卡片模式 |
 | showDivider | bool | true | 是否展示分割线 |

tdesign-component/example/assets/api/count-down_api.md

@@ -29,9 +29,14 @@
 | timePadding | EdgeInsets? | - | 时间容器内边距 |
 | timeMargin | EdgeInsets? | - | 时间容器外边距 |
 | timeBox | BoxDecoration? | - | 时间容器装饰 |
-| timeFont | Font? | - | 时间字体尺寸 |
+| timeFontFamily | FontFamily? | - | 时间字体 |
+| timeFontSize | double? | - | 时间字体尺寸 |
+| timeFontHeight | double? | - | 时间字体行高 |
+| timeFontWeight | FontWeight? | - | 时间字体粗细 |
 | timeColor | Color? | - | 时间字体颜色 |
-| splitFont | Font? | - | 分隔符字体尺寸 |
+| splitFontSize | double? | - | 分隔符字体尺寸 |
+| splitFontHeight | double? | - | 分隔符字体行高 |
+| splitFontWeight | FontWeight? | - | 分隔符字体粗细 |
 | splitColor | Color? | - | 分隔符字体颜色 |
 | space | double? | - | 时间与分隔符的间隔 |
 

tdesign-component/example/assets/api/dialog_api.md

@@ -11,6 +11,8 @@
 | radius | double | 12.0 | 圆角 |
 | title | String? | - | 标题 |
 | titleColor | Color | const Color(0xE6000000) | 标题颜色 |
+| titleAlignment | AlignmentGeometry? | - | 标题对齐模式 |
+| contentWidget | Widget? | - | 内容Widget |
 | content | String? | - | 内容 |
 | contentColor | Color? | - | 内容颜色 |
 | leftBtn | TDDialogButtonOptions? | - | 左侧按钮配置 |
@@ -46,6 +48,8 @@
 | radius | double | 12.0 | 圆角 |
 | title | String? | - | 标题 |
 | titleColor | Color | const Color(0xE6000000) | 标题颜色 |
+| titleAlignment | AlignmentGeometry? | - | 标题对齐模式 |
+| contentWidget | Widget? | - | 内容Widget |
 | content | String? | - | 内容 |
 | contentColor | Color? | - | 内容颜色 |
 | contentMaxHeight | double | 0 | 内容的最大高度，默认为0，也就是不限制高度 |
@@ -67,6 +71,8 @@
 | radius | double | 12.0 | 圆角 |
 | title | String? | - | 标题 |
 | titleColor | Color | const Color(0xE6000000) | 标题颜色 |
+| titleAlignment | AlignmentGeometry? | - | 标题对齐模式 |
+| contentWidget | Widget? | - | 内容Widget |
 | content | String? | - | 内容 |
 | hintText | String? | '' | 输入提示 |
 | contentColor | Color? | - | 内容颜色 |
@@ -88,6 +94,8 @@
 | titleColor | Color | const Color(0xE6000000) | 标题颜色 |
 | content | String? | - | 内容 |
 | contentColor | Color? | - | 内容颜色 |
+| titleAlignment | AlignmentGeometry? | - | 标题对齐模式 |
+| contentWidget | Widget? | - | 内容Widget |
 | contentMaxHeight | double | 0 | 内容的最大高度，默认为0，也就是不限制高度 |
 | leftBtn | TDDialogButtonOptions? | - | 左侧按钮配置 |
 | rightBtn | TDDialogButtonOptions? | - | 右侧按钮配置 |
@@ -150,10 +158,12 @@
 | key |  | - |  |
 | title | String? | - | 标题 |
 | titleColor | Color | Colors.black | 标题颜色 |
-| padding | EdgeInsetsGeometry? | const EdgeInsets.fromLTRB(24, 32, 24, 0) | 内容的内边距 |
+| titleAlignment | AlignmentGeometry? | - | 标题对齐模式 |
+| contentWidget | Widget? | - | 内容Widget |
 | content | String? | - | 内容 |
 | contentColor | Color? | - | 内容颜色 |
 | contentMaxHeight | double | 0 | 内容的最大高度，默认为0，也就是不限制高度 |
+| padding | EdgeInsetsGeometry? | const EdgeInsets.fromLTRB(24, 32, 24, 0) | 内容的内边距 |
 
 ```
 ```

tdesign-component/example/assets/api/input_api.md

@@ -6,7 +6,6 @@
 | --- | --- | --- | --- |
 | key |  | - |  |
 | width | double? | - | 输入框宽度(TDCardStyle时必须设置该参数) |
-| height | double? | - | 输入框宽度 |
 | textStyle | TextStyle? | - | 文本颜色 |
 | backgroundColor | Color? | - | 输入框背景色 |
 | decoration | Decoration? | - | 输入框样式 |

tdesign-component/example/assets/api/radio_api.md

@@ -9,11 +9,14 @@
 | id |  | - |  |
 | key |  | - |  |
 | title |  | - |  |
+| titleFont |  | - |  |
 | subTitle |  | - |  |
+| subTitleFont |  | - |  |
 | enable |  | true |  |
 | subTitleMaxLine |  | 1 |  |
 | titleMaxLine |  | 1 |  |
-| checkedColor |  | - |  |
+| selectColor |  | - |  |
+| disableColor |  | - |  |
 | customContentBuilder |  | - |  |
 | spacing |  | - |  |
 | cardMode |  | - |  |

tdesign-component/example/assets/api/switch_api.md

@@ -14,3 +14,5 @@
 | thumbContentOnColor | Color? | - | 开启时ThumbView的颜色 |
 | thumbContentOffColor | Color? | - | 关闭时ThumbView的颜色 |
 | onChanged | OnSwitchChanged? | - | 改变事件 |
+| openText | String? | - | 打开文案 |
+| closeText | String? | - | 关闭文案 |

tdesign-component/example/assets/api/tab-bar_api.md

@@ -45,6 +45,8 @@
 | showTopBorder | bool? | true | 是否展示bar上边线（设置为true 但是topBorder样式未设置，则使用默认值,非胶囊型才生效） |
 | topBorder | BorderSide? | - | 上边线样式 |
 | useSafeArea | bool | true | 使用安全区域 |
+| selectedBgColor | Color? | - | 选中时背景颜色 |
+| unselectedBgColor | Color? | - | 未选中时背景颜色 |
 
 ```
 ```

tdesign-component/example/assets/api/tabs_api.md

@@ -46,6 +46,8 @@
 | onTap |  Function(int)? | - | 点击事件 |
 | outlineType | TDTabBarOutlineType | TDTabBarOutlineType.filled | 选项卡样式 |
 | showIndicator | bool | false | 是否展示引导控件 |
+| dividerColor | Color? | - | 分割线颜色 |
+| dividerHeight | double | 0.5 | 分割线高度,小于等于0则不展示分割线 |
 
 ```
 ```

tdesign-component/example/assets/api/theme_api.md

@@ -27,12 +27,13 @@
 | 参数 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | name | String | - | 名称 |
-| colorMap | Map<String, Color> | - | 颜色 |
-| fontMap | Map<String, Font> | - | 字体尺寸 |
-| radiusMap | Map<String, double> | - | 圆角 |
-| fontFamilyMap | Map<String, FontFamily> | - | 字体样式 |
-| shadowMap | Map<String, List<BoxShadow>> | - | 阴影 |
-| spacerMap | Map<String, double> | - | 间隔 |
+| colorMap | _TDMap<String, Color> | - | 颜色 |
+| fontMap | _TDMap<String, Font> | - | 字体尺寸 |
+| radiusMap | _TDMap<String, double> | - | 圆角 |
+| fontFamilyMap | _TDMap<String, FontFamily> | - | 字体样式 |
+| shadowMap | _TDMap<String, List<BoxShadow>> | - | 阴影 |
+| spacerMap | _TDMap<String, double> | - | 间隔 |
+| refMap | _TDMap<String, String> | - | 映射关系 |
 | extraThemeData | TDExtraThemeData? | - | 额外定义的结构 |
 
 

tdesign-component/example/assets/code/bottomTabBar._customBgColor.txt

@@ -0,0 +1,44 @@
+
+  Widget _customBgColor(BuildContext context) {
+    return TDBottomTabBar(TDBottomTabBarBasicType.iconText,
+        useVerticalDivider: false,
+        selectedBgColor: TDTheme.of(context).errorColor3,
+        unselectedBgColor: TDTheme.of(context).grayColor3,
+        navigationTabs: [
+          TDBottomTabBarTabConfig( tabText: '标签',
+            selectedIcon: _selectedIcon,
+            unselectedIcon: _unSelectedIcon,
+            onTap: () {
+              onTapTab(context, '标签1');
+            },
+          ),
+          TDBottomTabBarTabConfig( tabText: '标签',
+            selectedIcon: _selectedIcon,
+            unselectedIcon: _unSelectedIcon,
+            onTap: () {
+              onTapTab(context, '标签2');
+            },
+          ),
+          TDBottomTabBarTabConfig( tabText: '标签',
+            selectedIcon: _selectedIcon,
+            unselectedIcon: _unSelectedIcon,
+            onTap: () {
+              onTapTab(context, '标签2');
+            },
+          ),
+          TDBottomTabBarTabConfig( tabText: '标签',
+            selectedIcon: _selectedIcon,
+            unselectedIcon: _unSelectedIcon,
+            onTap: () {
+              onTapTab(context, '标签2');
+            },
+          ),
+          TDBottomTabBarTabConfig( tabText: '标签',
+            selectedIcon: _selectedIcon,
+            unselectedIcon: _unSelectedIcon,
+            onTap: () {
+              onTapTab(context, '标签2');
+            },
+          ),
+        ]);
+  }

tdesign-component/example/assets/code/checkbox._customColor.txt

@@ -0,0 +1,37 @@
+
+  Widget _customColor(BuildContext context) {
+    return TDCheckboxGroupContainer(
+      contentDirection: TDContentDirection.right,
+      selectIds: const ['0'],
+      child: Column(
+        children:  [
+          TDCheckbox(
+            selectColor: TDTheme.of(context).errorColor3,
+            disableColor: TDTheme.of(context).errorColor1,
+            id: '0',
+            title: '选项禁用-已选',
+            style: TDCheckboxStyle.circle,
+            enable: false,
+          ),
+          TDCheckbox(
+            selectColor: TDTheme.of(context).errorColor3,
+            disableColor: TDTheme.of(context).errorColor1,
+            id: '1',
+            title: '选项禁用-默认',
+            style: TDCheckboxStyle.circle,
+          ),
+
+          TDCheckbox(
+            selectColor: TDTheme.of(context).errorColor3,
+            disableColor: TDTheme.of(context).errorColor1,
+            id: 'index:0',
+            title: '多选',
+            subTitle: '描述信息',
+            titleMaxLine: 2,
+            subTitleMaxLine: 2,
+            cardMode: true,
+          ),
+        ],
+      ),
+    );
+  }