A Flutter UI components lib for TDesign.
Home Page: https://tdesign.tencent.com/flutter
TDesign Flutter技术栈组件库，适合在移动端项目中使用。
Flutter组件库项目在tdesign-component文件夹下，相关使用详见tdesign-component/README_zh.md
TDesign 遵循 MIT 协议
目前Popup 弹出层容器圆角不支持修改，望支持修改
麻烦问一下时间选择器，能支持农历选择吗？比如：腊月十五，润二月初三。
还有样式显示生肖，比如 ：2024 龙年。
业务自定义数据，甚至是自定义显示样式，TD提供一个通用的壳
1.TDBottomTabBar尺寸不好调整
2.自定义icon 可以设置图标颜色 但是文字颜色不能设置
1.放开底部文字尺寸
2.允许自定义文字颜色不能设置
开放自定义颜色
0.1.2
No response
No response
No response
No response
No response
No response
No response
官网企业微信群无法添加
No response
官网企业微信群无法添加
官网企业微信群无法添加
官网企业微信群无法添加
No response
No response
No response
官网企业微信群无法添加
TDSideBar]这个内边距 可以修改
目前没有发现好用的图片和视频的预览组件，有没有添加的计划
这个组件应该是很常见的，看vue上有这个，flutter版本有计划支持吗？
3.16.0
No response
No response
No response
No response
No response
No response
No response
No response
0.1.2
No response
希望可以解决不垂直居中的问题
No response
No response
No response
No response
No response
Switch开关好像那个展示文字是固定的，开或者关，如果能设置左右文字更好
支持自定义
内容过多时使用，循环展示
暂无
类似这种的，下拉筛选
最新版本
No response
No response
No response
No response
No response
No response
No response
No response
0.1.2
No response
[TDButton] 在TDButton的onTap中同步执行Navigator.of(context).pushNamedAndRemoveUntil()方法会抛出异常：FlutterError (setState() called after dispose(): _TDButtonState#9cc4e(lifecycle state: defunct, not mounted)
延时执行可以避免，希望可以修复一下。
No response
No response
No response
No response
No response
0.1.2
No response
组件自刷新，无需手动刷新
No response
No response
No response
No response
Flutter 都能有python版的部署方案
https://github.com/flet-dev/flet
或者做成AI火爆的 gradio
https://github.com/gradio-app/gradio
我觉得tdesign-flutter也能考虑
0.1.2
No response
No response
右侧组件支持自定义，可以有默认样式，但支持覆盖，其他的组件也可以如此，有一套默认样式，但也需要把自定义能力给到使用者
右侧组件支持自定义，但有特殊限制
3.16.3
No response
No response
No response
1.像复选框的size只能选大中小，如果支持直接传double值就好了
2.像这种能直接修改选中颜色吗
0.1.1
No response
No response
No response
No response
3.16.2
No response
No response
No response
0.1.2
No response
showDivider字段可以控制下划线
No response
No response
No response
No response
No response
再增加一个上拉加载的组件
放开限制，允许业务自定义
组件的默认按钮的操作为开放
0.1.0
No response
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: false,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@OverRide
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: const TDNavBar(
title: "TDesign Demo",
rightBarItems: [],
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
bottomNavigationBar: TDBottomTabBar(
TDBottomTabBarBasicType.iconText,
componentType: TDBottomTabBarComponentType.label,
outlineType: TDBottomTabBarOutlineType.capsule,
useVerticalDivider: false,
barHeight: 56,
navigationTabs: [
TDBottomTabBarTabConfig(
iconTextTypeConfig: IconTextTypeConfig(useDefaultIcon: true, tabText: '标签'),
tabText: '标签',
onTap: () {
// onTapTab(context, '标签1');
},
),
TDBottomTabBarTabConfig(
iconTextTypeConfig: IconTextTypeConfig(useDefaultIcon: true, tabText: '标签'),
tabText: '标签',
onTap: () {
// onTapTab(context, '标签2');
},
),
TDBottomTabBarTabConfig(
iconTextTypeConfig: IconTextTypeConfig(useDefaultIcon: true, tabText: '标签'),
tabText: '标签',
onTap: () {
// onTapTab(context, '标签3');
},
),
],
),
floatingActionButton: TDButton(
icon: TDIcons.add,
onTap: _incrementCounter,
shape: TDButtonShape.circle,
type: TDButtonType.fill,
size: TDButtonSize.large,
theme: TDButtonTheme.primary,
),
);
}
}
期望按照实际高度显示，并且做底部安全区域的处理
撑满整个页面，底部也没做安全区域的处理
No response
iOS 15 pro
iOS17
No response
0.1.1
No response
No response
No response
No response
Flutter(3.10.3)
Android 13
No response
No response
0.1.2
No response
TDButton组件，设置禁用属性 disabled 值为 true 状态没有禁用
tdesign-flutter/tdesign-component/lib/src/components/button/td_button.dart
Lines 181 to 209 in 29ef442
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
class HomePage extends StatefulWidget {
HomePage({super.key});
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _loading = false;
void onToggle() {
setState(() => _loading = true);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: TDNavBar(
title: 'home',
height: 48,
),
body: Container(
child: Center(
child: Row(
children: [
TDButton(
text: '按钮',
theme: TDButtonTheme.primary,
disabled: _loading,
onTap: onToggle,
)
],
)),
),
);
}
}return GestureDetector(
child: display,
onTap: widget.onTap,
onLongPress: widget.onLongPress,
onTapDown: (TapDownDetails details){
if(widget.disabled){
return;
}
setState(() {
_buttonStatus = TDButtonStatus.active;
});
},
onTapUp: (TapUpDetails details){
if(widget.disabled){
return;
}
Future.delayed(Duration(milliseconds: 100),() {
setState(() {
- widget.disabled TDButtonStatus.defaultState;
+ widget.disabled ? TDButtonStatus.disable : TDButtonStatus.defaultState;
});
});
},
onTapCancel: (){
if(widget.disabled){
return;
}
setState(() {
- widget.disabled TDButtonStatus.defaultState;
+ widget.disabled ? TDButtonStatus.disable : TDButtonStatus.defaultState;
});
},No response
No response
No response
No response
No response
No response
支持换行
[TDRadio ] Radio 字体大小可以设置吗？
[TDRadio ] Radio 字体大小可以设置吗？
标题可以设置左右对齐位置吗
如果内容支持widget就更完美了
0.1.2
No response
No response
No response
No response
No response
No response
No response
type设置为customText时可以变更背景色
0.1.2
No response
No response
onChanged 触发后可能业务执行失败，不需要改变switch的状态
点击后就一定会改变Switch的状态
No response
No response
No response
No response
0.1.3
No response
TDButton(
text: '登录',
size: TDButtonSize.large,
type: TDButtonType.fill,
shape: TDButtonShape.circle,
theme: TDButtonTheme.primary,
）
extensions:[
TDThemeData(
name: 'myExtension',
colorMap: {
/// 覆盖tdesgin主题样式
"brandNormalColor": Colors.red,
},
)]
无用
latest
macbook M1
Macos 14+
！！！！！！新版本问题！！！！！0.1.2没这个问题！！！！！！！！！！！！！！！
The content you are editing has changed. Please copy your edits and refresh the page.
导航栏加不了下边框呢
下个版本可以记录新增下不呢
请问这个 Tabs 选项卡 下面有个灰色的满屏宽度的线，我怎么把它去掉？
加参数可以自定义
0.1.3
No response
1.这个设置了false不生效
2.还有高度设置了也没有效果，一直用的默认的56
No response
No response
No response
No response
No response
No response
每个应用的主题色可能不一样，设计尺寸也有区别，希望能自定义传值
希望能自定义传值
当我在页面上显示出loading组件后，我需要在数据加载完成后主动的关闭loading组件。
希望可以有API方便的主动关闭loading的组件，类似：TDToast.dismissLoading;
0.1.1
No response
button组件在macos上面，按钮的文字没有上下居中
按钮的文字上下居中
3.16
macos14.2
macos14.2
无
https://tdesign.tencent.com/flutter/components/dialog
随便打开一个组件，在右侧的预览页，无法滑动到最底部
No response
No response
No response
No response
No response
0.1.2
No response
No response
No response
No response
No response
No response
No response
我现在产品的需求是分钟列表只显示00和30这两个选项，其他分钟都不允许用户选择。
我建议增加filter方法，可以由用户过滤掉不需要的选项。filterItem('year', 2024)
还可以增加一个format方法，由用户格式化每个选项的显示。formatItem('year', 2024)
国家化语言适配
支持自定义语言
0.1.0
No response
运行 example 编译不通过
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
../lib/src/components/tabbar/td_bottom_tab_bar.dart:742:39: Error: Property 'context' cannot be accessed on 'OverlayState?' because it is potentially null.
正常运行
No response
3.3.0
No response
No response
小白不太懂，请教下各位大佬
升级easy refresh到最新版本
升级easy refresh到最新版本
瀑布流中放置图片，根据图片宽度自适应高度，请参考flutter官方Image里的fitWidth
请参考flutter官方Image里BoxFit.fitWidth
input支持根据内容动态调整高度吗。像微信输入框这种
支持动态调整
用户自己定义SideBar 侧边栏选中后的文字颜色
支持自定义字体样式
虽然UI库很好看但是并没有继承Flutter的设计思维。首先没有使用ThemeData, 这样导致用户需要单独再去声明一套tdesign的themeData，此外，耦合严重，为什么要耦合easy refresh等组件呢？很多问题
0.1.1
No response
No response
竖向的dotsBar样式应该修改高度
list.add(Container(
key: Key('pagination_$i'),
margin: EdgeInsets.all(space),
child: AnimatedContainer(
duration:
Duration(milliseconds: animationDuration ?? _kAminatedDuration),
width: isActiviRectangle
? roundedRectangleWidth
: (active ? activeSize : size),
height: active ? activeSize : size,
// config.scrollDirection == Axis.vertical 在判定竖向时修改高度而不是宽度
decoration: BoxDecoration(
color: active ? activeColor : color,
borderRadius: BorderRadius.circular(activeSize / 2)),
),
));
No response
No response
No response
No response
No response
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.