修改Cell布局溢出问题

Luozf12345 · Luozf12345 · commit b9b3360e1ffa · 2025-11-12T14:26:59.000+08:00
diff --git a/tdesign-component/example/assets/code/cell._buildTestContent.txt b/tdesign-component/example/assets/code/cell._buildTestContent.txt
@@ -3,6 +3,8 @@ Widget _buildTestContent(BuildContext context) {
   return const TDCell(
     title: '这是标题，非常长的标题',
     note: '这是一个很长很长的note字段，测试长内容，你说这内容长不长！',
+    noteMaxLine: 2,
+    noteMaxWidth: 200,
     arrow: true,
   );
 }
diff --git a/tdesign-component/example/assets/code/popover._buildNCustomPopover.txt b/tdesign-component/example/assets/code/popover._buildNCustomPopover.txt
@@ -1,5 +1,9 @@
 
   Widget _buildNCustomPopover(BuildContext context) {
+    var textStyle = TextStyle(
+        color: theme == TDPopoverTheme.light
+            ? TDTheme.of(context).fontGyColor1
+            : TDTheme.of(context).fontWhColor1);
     return LayoutBuilder(
       builder: (_, constrains) {
         return TDButton(
@@ -12,8 +16,25 @@
               padding: const EdgeInsets.all(0),
               theme: theme,
               width: 108,
-              height: 148,
-              contentWidget: _buildPopoverList(context),
+              height: 152,
+              contentWidget: Column(
+                children: [
+                  Container(
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                    child: TDText('选项1', style: textStyle),
+                  ),
+                  const TDDivider(height: 0.5),
+                  Container(
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                    child: TDText('选项2', style: textStyle),
+                  ),
+                  const TDDivider(height: 0.5),
+                  Container(
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                    child: TDText('选项3', style: textStyle),
+                  ),
+                ],
+              ),
             );
           },
         );
diff --git a/tdesign-component/example/lib/page/td_cell_page.dart b/tdesign-component/example/lib/page/td_cell_page.dart
@@ -23,7 +23,7 @@ class TDCellPage extends StatelessWidget {
       ],
       test: const [
         ExampleItem(desc: '自定义内边距-padding', builder: _buildPadding),
-        ExampleItem(desc: '长标题、内容', builder: _buildTestContent),
+        ExampleItem(desc: '长标题、内容,指定note宽度', builder: _buildTestContent),
       ],
     );
   }
@@ -167,6 +167,8 @@ Widget _buildTestContent(BuildContext context) {
   return const TDCell(
     title: '这是标题，非常长的标题',
     note: '这是一个很长很长的note字段，测试长内容，你说这内容长不长！',
+    noteMaxLine: 2,
+    noteMaxWidth: 200,
     arrow: true,
   );
 }
diff --git a/tdesign-component/example/lib/page/td_popover_page.dart b/tdesign-component/example/lib/page/td_popover_page.dart
@@ -235,35 +235,12 @@ class _TDPopoverPage extends State<TDPopoverPage> {
     );
   }
 
-  // @todo
-  Widget _buildPopoverList(BuildContext context) {
+  @Demo(group: 'popover')
+  Widget _buildNCustomPopover(BuildContext context) {
     var textStyle = TextStyle(
         color: theme == TDPopoverTheme.light
             ? TDTheme.of(context).fontGyColor1
             : TDTheme.of(context).fontWhColor1);
-
-    return Column(
-      children: [
-        Container(
-          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
-          child: TDText('选项1', style: textStyle),
-        ),
-        const TDDivider(height: 0.5),
-        Container(
-          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
-          child: TDText('选项2', style: textStyle),
-        ),
-        const TDDivider(height: 0.5),
-        Container(
-          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
-          child: TDText('选项3', style: textStyle),
-        ),
-      ],
-    );
-  }
-
-  @Demo(group: 'popover')
-  Widget _buildNCustomPopover(BuildContext context) {
     return LayoutBuilder(
       builder: (_, constrains) {
         return TDButton(
@@ -276,8 +253,25 @@ class _TDPopoverPage extends State<TDPopoverPage> {
               padding: const EdgeInsets.all(0),
               theme: theme,
               width: 108,
-              height: 148,
-              contentWidget: _buildPopoverList(context),
+              height: 152,
+              contentWidget: Column(
+                children: [
+                  Container(
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                    child: TDText('选项1', style: textStyle),
+                  ),
+                  const TDDivider(height: 0.5),
+                  Container(
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                    child: TDText('选项2', style: textStyle),
+                  ),
+                  const TDDivider(height: 0.5),
+                  Container(
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                    child: TDText('选项3', style: textStyle),
+                  ),
+                ],
+              ),
             );
           },
         );
diff --git a/tdesign-component/lib/src/components/cell/td_cell.dart b/tdesign-component/lib/src/components/cell/td_cell.dart
@@ -24,6 +24,8 @@ class TDCell extends StatefulWidget {
     this.leftIconWidget,
     this.note,
     this.noteWidget,
+    this.noteMaxWidth,
+    this.noteMaxLine = 1,
     this.required = false,
     this.title,
     this.titleWidget,
@@ -80,6 +82,12 @@ class TDCell extends StatefulWidget {
   /// 说明文字组件
   final Widget? noteWidget;
 
+  /// 说明文字组件 最大宽度，超过部分显示省略号，防止文字溢出
+  final double? noteMaxWidth;
+
+  /// 说明文字组件 最大行数
+  final int noteMaxLine;
+
   /// 是否显示表单必填星号
   final bool? required;
 
@@ -211,12 +219,21 @@ class _TDCellState extends State<TDCell> {
             ),
             Wrap(
               spacing: theme.spacer4,
-              // crossAxisAlignment: WrapCrossAlignment.center,
+              crossAxisAlignment: WrapCrossAlignment.center,
               children: [
                 if (widget.noteWidget != null)
                   widget.noteWidget!
                 else if (widget.note?.isNotEmpty ?? false)
-                  TDText(widget.note!, style: style.noteStyle),
+                  ConstrainedBox(
+                      constraints: BoxConstraints(
+                          maxWidth: widget.noteMaxWidth ??
+                              MediaQuery.of(context).size.width - 84),
+                      child: TDText(
+                        widget.note!,
+                        style: style.noteStyle,
+                        overflow: TextOverflow.ellipsis,
+                        maxLines: widget.noteMaxLine,
+                      )),
                 if (widget.rightIconWidget != null)
                   widget.rightIconWidget!
                 else if (widget.rightIcon != null)
diff --git a/tdesign-component/lib/src/components/upload/td_upload.dart b/tdesign-component/lib/src/components/upload/td_upload.dart
@@ -498,7 +498,7 @@ class _TDUploadState extends State<TDUpload> {
                     color: Colors.white,
                   )),
               Padding(
-                padding: const EdgeInsets.only(top: 4),
+                padding: const EdgeInsets.only(top: 2),
                 child: TDText(
                   displayText,
                   textColor: Colors.white,

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@ Widget _buildTestContent(BuildContext context) {`
`3`	`3`	`return const TDCell(`
`4`	`4`	`title: '这是标题，非常长的标题',`
`5`	`5`	`note: '这是一个很长很长的note字段，测试长内容，你说这内容长不长！',`
	`6`	`+ noteMaxLine: 2,`
	`7`	`+ noteMaxWidth: 200,`
`6`	`8`	`arrow: true,`
`7`	`9`	`);`
`8`	`10`	`}`