Code Monkey home page Code Monkey logo

tdesign-flutter's Introduction

TDesign Logo

TDesign Flutter 技术栈组件库,适合在移动端项目中使用。

简介

Flutter 组件库项目在 tdesign-component 文件夹下,相关使用详见tdesign-component/README_zh.md

其他技术栈实现

交流反馈

开源协议

TDesign 遵循 MIT 协议

tdesign-flutter's People

Contributors

aaronmhl avatar arvinwli avatar bb-fat avatar ccxxx1aobai avatar consonluo avatar dorayx avatar ganluo960214 avatar github-actions[bot] avatar handwerstd avatar helloted avatar hkaikai avatar jflin19990707 avatar limpid-8818 avatar liweijie0812 avatar luozf12345 avatar lxw5689 avatar sara010 avatar shinyina avatar shizhe2018 avatar simonlei avatar springhgui avatar tingshine avatar tonghualee avatar uyarn avatar xiaofanqingzjj avatar zhengbledor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tdesign-flutter's Issues

[TDLoading] loading不支持快速关闭

这个功能解决了什么问题

当我在页面上显示出loading组件后,我需要在数据加载完成后主动的关闭loading组件。

你建议的方案是什么

希望可以有API方便的主动关闭loading的组件,类似:TDToast.dismissLoading;

[TDNavBar] 真机展示有时会被状态栏遮挡

tdesign-flutter 版本

0.1.2

重现链接

No response

重现步骤

wecom-temp-44786-d39b567bb6420455a1096205b6e5a564

期望结果

No response

实际结果

No response

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

编译不通过

tdesign-flutter 版本

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.

  • 'OverlayState' is from 'package:flutter/src/widgets/overlay.dart' ('../../../../flutter/packages/flutter/lib/src/widgets/overlay.dart').
    Try accessing using ?. instead.
    Overlay.of(widget.btnContext).context.findRenderObject() as RenderBox;
    ^^^^^^^
    ../lib/src/components/toast/td_toast.dart:86:20: Error: Method 'insert' cannot be called on 'OverlayState?' because it is potentially null.
  • 'OverlayState' is from 'package:flutter/src/widgets/overlay.dart' ('../../../../flutter/packages/flutter/lib/src/widgets/overlay.dart').
    Try calling using ?. instead.
    overlayState.insert(_overlayEntry!);
    ^^^^^^
    ../lib/src/components/tabs/td_horizontal_tab_bar.dart:554:45: Error: Property 'color' cannot be accessed on 'MaterialInkController?' because it is potentially null.
  • 'MaterialInkController' is from 'package:flutter/src/material/material.dart' ('../../../../flutter/packages/flutter/lib/src/material/material.dart').
    Try accessing using ?. instead.
    color.value == Material.of(context).color?.value) {
    ^^^^^
    ../lib/src/components/tabs/td_horizontal_tab_bar.dart:1561:29: Error: Property 'animation' cannot be accessed on 'TabController?' because it is potentially null.
  • 'TabController' is from 'package:flutter/src/material/tab_controller.dart' ('../../../../flutter/packages/flutter/lib/src/material/tab_controller.dart').
    Try accessing using ?. instead.
    parent: tabController.animation!,
    ^^^^^^^^^
    ../lib/src/components/tabs/td_horizontal_tab_bar.dart:1569:39: Error: Property 'index' cannot be accessed on 'TabController?' because it is potentially null.
  • 'TabController' is from 'package:flutter/src/material/tab_controller.dart' ('../../../../flutter/packages/flutter/lib/src/material/tab_controller.dart').
    Try accessing using ?. instead.
    tabIndex: tabController.index + 1,
    ^^^^^
    ../lib/src/components/tabs/td_horizontal_tab_bar.dart:1570:39: Error: Property 'length' cannot be accessed on 'TabController?' because it is potentially null.
  • 'TabController' is from 'package:flutter/src/material/tab_controller.dart' ('../../../../flutter/packages/flutter/lib/src/material/tab_controller.dart').
    Try accessing using ?. instead.
    tabCount: tabController.length),
    ^^^^^^
    ../lib/src/components/tabs/td_horizontal_tab_bar.dart:1574:53: Error: Property 'length' cannot be accessed on 'TabController?' because it is potentially null.
  • 'TabController' is from 'package:flutter/src/material/tab_controller.dart' ('../../../../flutter/packages/flutter/lib/src/material/tab_controller.dart').
    Try accessing using ?. instead.
    List.generate(tabController.length, (int tabIndex) {
    ^^^^^^
    ../lib/src/components/tabs/td_horizontal_tab_bar.dart:1575:51: Error: The argument type 'TabController?' can't be assigned to the parameter type 'TabController' because 'TabController?' is nullable and 'TabController' isn't.
  • 'TabController' is from 'package:flutter/src/material/tab_controller.dart' ('../../../../flutter/packages/flutter/lib/src/material/tab_controller.dart').
    return _buildTabIndicator(tabIndex, tabController,
    ^
    Failed to compile application.

期望结果

正常运行

实际结果

No response

Flutter版本

3.3.0

设备与机型信息

No response

系统版本

No response

补充说明

小白不太懂,请教下各位大佬

[TDDatePicker] 能支持农历选择吗?

这个功能解决了什么问题

麻烦问一下时间选择器,能支持农历选择吗?比如:腊月十五,润二月初三。
还有样式显示生肖,比如 :2024 龙年。

你建议的方案是什么

业务自定义数据,甚至是自定义显示样式,TD提供一个通用的壳

[TDButton] 在TDButton的onTap中同步执行Navigator.of(context).pushNamedAndRemoveUntil()方法会抛出异常:FlutterError (setState() called after dispose(): _TDButtonState#9cc4e(lifecycle state: defunct, not mounted)

tdesign-flutter 版本

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

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

TDAvatar

这个功能解决了什么问题

image

你建议的方案是什么

type设置为customText时可以变更背景色

TDCheckbox自定义size和主题色

这个功能解决了什么问题

每个应用的主题色可能不一样,设计尺寸也有区别,希望能自定义传值

你建议的方案是什么

希望能自定义传值

[TDButton] TDButton点击禁用效果无效

tdesign-flutter 版本

0.1.2

重现链接

No response

重现步骤

问题说明

TDButton组件,设置禁用属性 disabled 值为 true 状态没有禁用

问题代码段

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(() {
_buttonStatus = TDButtonStatus.defaultState;
});
});
},
onTapCancel: (){
if(widget.disabled){
return;
}
setState(() {
_buttonStatus = TDButtonStatus.defaultState;
});

重新代码

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,
            )
          ],
        )),
      ),
    );
  }
}

修复bug

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

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

[TDBottomTabBar] 在bottomNavigationBar中使用时,直接赋值,会撑满整个屏幕,并且也没做安全区域的限制

tdesign-flutter 版本

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,
),
);
}
}

期望结果

期望按照实际高度显示,并且做底部安全区域的处理

实际结果

撑满整个页面,底部也没做安全区域的处理
image

Flutter版本

No response

设备与机型信息

iOS 15 pro

系统版本

iOS17

补充说明

No response

[TDBottomTabBar] 尺寸不好调整

这个功能解决了什么问题

1.TDBottomTabBar尺寸不好调整
2.自定义icon 可以设置图标颜色 但是文字颜色不能设置

你建议的方案是什么

1.放开底部文字尺寸
2.允许自定义文字颜色不能设置

TDImage

这个功能解决了什么问题

瀑布流中放置图片,根据图片宽度自适应高度,请参考flutter官方Image里的fitWidth

你建议的方案是什么

请参考flutter官方Image里BoxFit.fitWidth

[按钮组件] 无按压反馈导致看起来很生硬

tdesign-flutter 版本

最新版本

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

button组件在macos上面,按钮的文字没有上下居中

tdesign-flutter 版本

0.1.1

重现链接

No response

重现步骤

button组件在macos上面,按钮的文字没有上下居中

期望结果

按钮的文字上下居中

实际结果

iShot_2023-12-30_18 35 35

Flutter版本

3.16

设备与机型信息

macos14.2

系统版本

macos14.2

补充说明

iShot_2023-12-30_18 35 35

[ALL] 国际化语言适配

这个功能解决了什么问题

国家化语言适配

你建议的方案是什么

支持自定义语言

[TDNavBar] 透明度为0时,会看到白色背景

tdesign-flutter 版本

0.1.2

重现链接

No response

重现步骤

wecom-temp-198377-a574ada36c8b1b2050bb9c4b58c98c8a

期望结果

No response

实际结果

No response

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

[Swiper] TDSwiperPagination.dotsBar; 竖向时dotsBar样式仍然是横向展示

tdesign-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

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

建议重新设计

虽然UI库很好看但是并没有继承Flutter的设计思维。首先没有使用ThemeData, 这样导致用户需要单独再去声明一套tdesign的themeData,此外,耦合严重,为什么要耦合easy refresh等组件呢?很多问题

官网企业微信群无法添加

tdesign-flutter 版本

官网企业微信群无法添加

重现链接

No response

重现步骤

官网企业微信群无法添加

期望结果

官网企业微信群无法添加

实际结果

官网企业微信群无法添加

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

官网企业微信群无法添加

[TDInput] showBottomDivider和高度设置了false不生效

tdesign-flutter 版本

0.1.3

重现链接

No response

重现步骤

企业微信截图_17113471788446 1.这个设置了false不生效 2.还有高度设置了也没有效果,一直用的默认的56

期望结果

No response

实际结果

No response

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

[TDTheme] 按钮的主题brandNormalColor修改不了

tdesign-flutter 版本

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,
},
)]

实际结果

无用

Flutter版本

latest

设备与机型信息

macbook M1

系统版本

Macos 14+

补充说明

!!!!!!新版本问题!!!!!0.1.2没这个问题!!!!!!!!!!!!!!!

Tasks

No tasks being tracked yet.

[DateTimePicker] 希望增加日期时间选择器的时分秒自定义功能

这个功能解决了什么问题

我现在产品的需求是分钟列表只显示00和30这两个选项,其他分钟都不允许用户选择。

你建议的方案是什么

我建议增加filter方法,可以由用户过滤掉不需要的选项。filterItem('year', 2024)
还可以增加一个format方法,由用户格式化每个选项的显示。formatItem('year', 2024)

[TDInput] rightBtn存在默认间距,rightWidget仅在特殊类型时生效,特殊类型时会有一条默认的下划线,type: TDInputType.cardStyle 时没有默认下划线,但rightWidget不生效了

tdesign-flutter 版本

0.1.2

重现链接

No response

重现步骤

No response

期望结果

右侧组件支持自定义,可以有默认样式,但支持覆盖,其他的组件也可以如此,有一套默认样式,但也需要把自定义能力给到使用者

实际结果

右侧组件支持自定义,但有特殊限制

Flutter版本

3.16.3

设备与机型信息

No response

系统版本

No response

补充说明

No response

[TDRadio] 水平排列会强制添加下划线

tdesign-flutter 版本

0.1.2

重现链接

No response

重现步骤

image

期望结果

showDivider字段可以控制下划线

实际结果

No response

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

[TDInput] 删除按钮显示的问题

tdesign-flutter 版本

0.1.2

重现链接

No response

重现步骤

image

期望结果

组件自刷新,无需手动刷新

实际结果

  1. 在onChanged回调中进行setState操作会导致整个父widget的重建
  2. 只能在StatefulWidget组件中使用

Flutter版本

No response

设备与机型信息

No response

系统版本

No response

补充说明

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.