fix(client): 修复表格 hover 效果不生效

DataTable 只有设了 onSelectChanged 才追踪鼠标状态,但加回调会
出现复选框。改用 Table + IntrinsicColumnWidth 保持列宽自动计算,
每行通过 MouseRegion + ValueNotifier<int> 共享悬停状态,真正实现
行级 hover 高亮(#F5F7FF)。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-04-14 00:38:56 +08:00
parent 08b68af34c
commit 998eb716dc
+89 -34
View File
@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import '../core/theme/app_theme.dart';
class DataTableCard extends StatelessWidget {
class DataTableCard extends StatefulWidget {
final List<DataColumn> columns;
final List<DataRow> rows;
final Widget? toolbar;
@@ -21,48 +21,51 @@ class DataTableCard extends StatelessWidget {
this.onPageChanged,
});
@override
State<DataTableCard> createState() => _DataTableCardState();
}
class _DataTableCardState extends State<DataTableCard> {
// 当前悬停行的索引(-1 表示无悬停)
final _hoveredRow = ValueNotifier<int>(-1);
@override
void dispose() {
_hoveredRow.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
if (toolbar != null)
if (widget.toolbar != null)
Container(
color: AppTheme.surface,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: toolbar!,
child: widget.toolbar!,
),
if (toolbar != null) const Divider(height: 1),
if (widget.toolbar != null) const Divider(height: 1),
Expanded(
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
constraints:
BoxConstraints(minWidth: constraints.maxWidth),
child: DataTable(
headingRowColor: WidgetStateProperty.all(
const Color(0xFFF0F4FF)),
dataRowColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.hovered)) {
return const Color(0xFFF5F7FF);
}
return null;
}),
headingTextStyle: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.primaryDark,
constraints: BoxConstraints(minWidth: constraints.maxWidth),
child: Table(
defaultColumnWidth: const IntrinsicColumnWidth(),
border: TableBorder(
horizontalInside: BorderSide(
color: Colors.grey.shade200,
width: 0.5,
),
),
dataTextStyle: const TextStyle(
fontSize: 13, color: AppTheme.textPrimary),
columnSpacing: 24,
horizontalMargin: 16,
dataRowMinHeight: 40,
dataRowMaxHeight: 56,
dividerThickness: 0.5,
columns: columns,
rows: rows,
children: [
_buildHeaderRow(),
for (int i = 0; i < widget.rows.length; i++)
_buildDataRow(i, widget.rows[i]),
],
),
),
),
@@ -70,7 +73,7 @@ class DataTableCard extends StatelessWidget {
),
),
// Pagination
if (totalCount != null)
if (widget.totalCount != null)
Container(
height: 48,
color: AppTheme.surface,
@@ -78,16 +81,16 @@ class DataTableCard extends StatelessWidget {
child: Row(
children: [
Text(
'$totalCount 条记录',
'${widget.totalCount} 条记录',
style: const TextStyle(
fontSize: 13, color: AppTheme.textSecondary),
),
const Spacer(),
_PaginationBar(
page: page,
total: totalCount!,
pageSize: pageSize,
onPageChanged: onPageChanged,
page: widget.page,
total: widget.totalCount!,
pageSize: widget.pageSize,
onPageChanged: widget.onPageChanged,
),
],
),
@@ -95,6 +98,58 @@ class DataTableCard extends StatelessWidget {
],
);
}
TableRow _buildHeaderRow() {
return TableRow(
decoration: const BoxDecoration(color: Color(0xFFF0F4FF)),
children: widget.columns.map((col) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.primaryDark,
),
child: col.numeric
? Align(alignment: Alignment.centerRight, child: col.label)
: col.label,
),
);
}).toList(),
);
}
TableRow _buildDataRow(int rowIndex, DataRow row) {
return TableRow(
children: List.generate(row.cells.length, (colIndex) {
final cell = row.cells[colIndex];
final col = widget.columns[colIndex];
return MouseRegion(
onEnter: (_) => _hoveredRow.value = rowIndex,
onExit: (_) {
if (_hoveredRow.value == rowIndex) _hoveredRow.value = -1;
},
child: ValueListenableBuilder<int>(
valueListenable: _hoveredRow,
builder: (context, hovered, _) => Container(
constraints: const BoxConstraints(minHeight: 48),
alignment:
col.numeric ? Alignment.centerRight : Alignment.centerLeft,
color: hovered == rowIndex ? const Color(0xFFF5F7FF) : null,
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 13, color: AppTheme.textPrimary),
child: cell.child,
),
),
),
);
}),
);
}
}
class _PaginationBar extends StatelessWidget {