Merge pull request #448 from hkaikai/fix/cell

Cell组件优化：默认样式构建优化、点击behavior调整、demo提供自定义样式用法
Tencent · Jan 20, 2025 · 499b329 · 499b329
2 parents b7b06da + d93e782
commit 499b329
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/tdesign-component/example/lib/page/td_cell_page.dart b/tdesign-component/example/lib/page/td_cell_page.dart
@@ -60,15 +60,26 @@ class TDCellPage extends StatelessWidget {
 
 @Demo(group: 'cell')
 Widget _buildSimple(BuildContext context) {
-  return const TDCellGroup(
+  // 可统一修改样式
+  var style = TDCellStyle(context: context);
+  return TDCellGroup(
+    style: style,
     cells: [
-      TDCell(arrow: true, title: '单行标题'),
-      TDCell(arrow: true, title: '单行标题', required: true),
-      TDCell(arrow: true, title: '单行标题', noteWidget: TDBadge(TDBadgeType.message, count: '8')),
-      TDCell(arrow: false, title: '单行标题', rightIconWidget: TDSwitch(isOn: true)),
-      TDCell(arrow: true, title: '单行标题', note: '辅助信息'),
-      TDCell(arrow: true, title: '单行标题', leftIcon: TDIcons.lock_on),
-      TDCell(arrow: false, title: '单行标题'),
+      // 可单独修改样式
+      TDCell(arrow: true, title: '单行标题', style: TDCellStyle.cellStyle(context)),
+      TDCell(
+        arrow: true,
+        title: '单行标题',
+        required: true,
+        onClick: (cell) {
+          print('单行标题');
+        },
+      ),
+      const TDCell(arrow: true, title: '单行标题', noteWidget: TDBadge(TDBadgeType.message, count: '8')),
+      const TDCell(arrow: false, title: '单行标题', rightIconWidget: TDSwitch(isOn: true)),
+      const TDCell(arrow: true, title: '单行标题', note: '辅助信息'),
+      const TDCell(arrow: true, title: '单行标题', leftIcon: TDIcons.lock_on),
+      const TDCell(arrow: false, title: '单行标题'),
     ],
   );
 }
@@ -118,12 +129,19 @@ Widget _buildCard(BuildContext context) {
 
 @Demo(group: 'cell')
 Widget _buildPadding(BuildContext context) {
-  var style = TDCellStyle.cellStyle(context);
+  var style = TDCellStyle(context: context);
   style.padding = const EdgeInsets.all(30);
   return TDCellGroup(
     theme: TDCellGroupTheme.cardTheme,
     cells: [
-      TDCell(arrow: true, title: 'padding-all-30', style: style,),
+      TDCell(
+        arrow: true,
+        title: 'padding-all-30',
+        style: style,
+        onClick: (cell) {
+          print('padding-all-30');
+        },
+      ),
     ],
   );
 }

diff --git a/tdesign-component/lib/src/components/cell/td_cell.dart b/tdesign-component/lib/src/components/cell/td_cell.dart
@@ -122,6 +122,7 @@ class _TDCellState extends State<TDCell> {
     var style = widget.style ?? TDCellInherited.of(context)?.style ?? TDCellStyle.cellStyle(context);
     var crossAxisAlignment = _getAlign();
     return GestureDetector(
+      behavior: HitTestBehavior.opaque,
       onTap: () {
         if (widget.onClick != null && !(widget.disabled ?? false)) {
           widget.onClick!(widget);

diff --git a/tdesign-component/lib/src/components/cell/td_cell_style.dart b/tdesign-component/lib/src/components/cell/td_cell_style.dart
@@ -5,6 +5,7 @@ import '../../../tdesign_flutter.dart';
 /// 单元格组件样式
 class TDCellStyle {
   TDCellStyle({
+    this.context,
     this.leftIconColor,
     this.rightIconColor,
     this.titleStyle,
@@ -21,7 +22,14 @@ class TDCellStyle {
     this.cardBorderRadius,
     this.cardPadding,
     this.titlePadding,
-  });
+  }) {
+    if (context != null) {
+      defaultStyle(context!);
+    }
+  }
+
+  /// 传递context，会生成默认样式
+  BuildContext? context;
 
   /// 左侧图标颜色
   Color? leftIconColor;
@@ -73,6 +81,10 @@ class TDCellStyle {
 
   /// 生成单元格默认样式
   TDCellStyle.cellStyle(BuildContext context) {
+    defaultStyle(context);
+  }
+
+  defaultStyle(BuildContext context) {
     backgroundColor = Colors.white;
     clickBackgroundColor = TDTheme.of(context).grayColor1;
     leftIconColor = TDTheme.of(context).brandColor7;