TDesign Flutter 技术栈组件库,适合在移动端项目中使用。
Flutter 组件库项目在 tdesign-component 文件夹下,相关使用详见tdesign-component/README_zh.md
- 桌面端 Vue 3 实现:web-vue-next
- 桌面端 React 实现: web-react
- 移动端小程序实现: 小程序
TDesign 遵循 MIT 协议
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 协议
内容过多时使用,循环展示
暂无
当我在页面上显示出loading组件后,我需要在数据加载完成后主动的关闭loading组件。
希望可以有API方便的主动关闭loading的组件,类似:TDToast.dismissLoading;
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
小白不太懂,请教下各位大佬
再增加一个上拉加载的组件
放开限制,允许业务自定义
麻烦问一下时间选择器,能支持农历选择吗?比如:腊月十五,润二月初三。
还有样式显示生肖,比如 :2024 龙年。
业务自定义数据,甚至是自定义显示样式,TD提供一个通用的壳
目前Popup 弹出层容器圆角不支持修改,望支持修改
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] 在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
onChanged 触发后可能业务执行失败,不需要改变switch的状态
点击后就一定会改变Switch的状态
No response
No response
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
input支持根据内容动态调整高度吗。像微信输入框这种
支持动态调整
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
1.TDBottomTabBar尺寸不好调整
2.自定义icon 可以设置图标颜色 但是文字颜色不能设置
1.放开底部文字尺寸
2.允许自定义文字颜色不能设置
瀑布流中放置图片,根据图片宽度自适应高度,请参考flutter官方Image里的fitWidth
请参考flutter官方Image里BoxFit.fitWidth
最新版本
No response
No response
No response
No response
No response
No response
No response
No response
用户自己定义SideBar 侧边栏选中后的文字颜色
支持自定义字体样式
0.1.1
No response
No response
No response
No response
3.16.2
No response
No response
No response
无
https://tdesign.tencent.com/flutter/components/dialog
随便打开一个组件,在右侧的预览页,无法滑动到最底部
No response
No response
No response
No response
No response
国家化语言适配
支持自定义语言
Switch开关好像那个展示文字是固定的,开或者关,如果能设置左右文字更好
支持自定义
标题可以设置左右对齐位置吗
如果内容支持widget就更完美了
目前没有发现好用的图片和视频的预览组件,有没有添加的计划
这个组件应该是很常见的,看vue上有这个,flutter版本有计划支持吗?
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
升级easy refresh到最新版本
升级easy refresh到最新版本
虽然UI库很好看但是并没有继承Flutter的设计思维。首先没有使用ThemeData, 这样导致用户需要单独再去声明一套tdesign的themeData,此外,耦合严重,为什么要耦合easy refresh等组件呢?很多问题
3.16.0
No response
No response
No response
No response
No response
No response
No response
No response
[TDRadio ] Radio 字体大小可以设置吗?
[TDRadio ] Radio 字体大小可以设置吗?
官网企业微信群无法添加
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没这个问题!!!!!!!!!!!!!!!
我现在产品的需求是分钟列表只显示00和30这两个选项,其他分钟都不允许用户选择。
我建议增加filter方法,可以由用户过滤掉不需要的选项。filterItem('year', 2024)
还可以增加一个format方法,由用户格式化每个选项的显示。formatItem('year', 2024)
0.1.2
No response
No response
右侧组件支持自定义,可以有默认样式,但支持覆盖,其他的组件也可以如此,有一套默认样式,但也需要把自定义能力给到使用者
右侧组件支持自定义,但有特殊限制
3.16.3
No response
No response
No response
Flutter 都能有python版的部署方案
https://github.com/flet-dev/flet
或者做成AI火爆的 gradio
https://github.com/gradio-app/gradio
我觉得tdesign-flutter也能考虑
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.