Tencent / Tencent/tdesign-flutter

SideBar 侧边栏TDSideBarItem使用badge的时候需要每一个label的内容长度相同才可以正常显示

Open
#662 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

IssueShoot
Dominant language
Dart
Stars
1.2k
Forks
182
Avg merge
2d 2h
Merged PRs (30d)
88

Description

tdesign-flutter 版本

0.1.8

重现链接

No response

重现步骤/代码

TDSideBar( value: _current, children: [ TDSideBarItem( label: '装货港城市', value: 1, badge: TDBadge( TDBadgeType.message, count: '${_loadCityList.length}', showZero: false, ), ), TDSideBarItem( label: '卸货港城市', value: 2, badge: TDBadge( TDBadgeType.message, count: '${_unloadCityList.length}', showZero: false, ), ), TDSideBarItem( label: '船皮要求', value: 3, badge: TDBadge( TDBadgeType.message, count: '${_tonnages.length}', showZero: false, ), ), TDSideBarItem( label: '装货时间', value: 4, badge: _time.isNotEmpty ? const TDBadge(TDBadgeType.redPoint) : null, ), TDSideBarItem( label: '货种', value: 5, badge: TDBadge( TDBadgeType.message, count: '${_goodsList.length}', showZero: false, ), ), TDSideBarItem( label: '常用航线', value: 6, badge: TDBadge( TDBadgeType.message, count: '${_shipLineList.length}', showZero: false, ), ), ], onSelected: (value) { setState(() { _current = value; }); if (_current == 1 || _current == 2) { _getHistoryAndPopularList(_current); } }, ), ),

我的前两个可以正常显示,后面的不可以,我把船皮要求改成船皮的要求就可以正常显示

期望结果

No response

实际结果

No response

Flutter版本

3.29.2

设备与机型信息

No response

系统版本

No response

补充说明

No response

IssueShoot

预估时长:3
期望完成时间:2025-7-7
开发难度:中
参与人数:1
需求对接人:jackjflin
验收标准:实现期望改造效果,提 MR并通过 验收无误
备注:最终激励以实际提交 pr 并合并为准。TDesignFlutter贡献指南:https://tdesign.tencent.com/flutter/develop

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the TDSideBar and TDSideBarItem entry points and reproduce the supplied example on Flutter 3.29.2 using labels of different lengths and message or red-point badges. Trace the badge and label layout, then verify that every item displays correctly without requiring equal label lengths.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.