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:
@@ -1,7 +1,7 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import '../core/theme/app_theme.dart';
|
import '../core/theme/app_theme.dart';
|
||||||
|
|
||||||
class DataTableCard extends StatelessWidget {
|
class DataTableCard extends StatefulWidget {
|
||||||
final List<DataColumn> columns;
|
final List<DataColumn> columns;
|
||||||
final List<DataRow> rows;
|
final List<DataRow> rows;
|
||||||
final Widget? toolbar;
|
final Widget? toolbar;
|
||||||
@@ -21,48 +21,51 @@ class DataTableCard extends StatelessWidget {
|
|||||||
this.onPageChanged,
|
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
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Column(
|
return Column(
|
||||||
children: [
|
children: [
|
||||||
if (toolbar != null)
|
if (widget.toolbar != null)
|
||||||
Container(
|
Container(
|
||||||
color: AppTheme.surface,
|
color: AppTheme.surface,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
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(
|
Expanded(
|
||||||
child: LayoutBuilder(
|
child: LayoutBuilder(
|
||||||
builder: (context, constraints) => SingleChildScrollView(
|
builder: (context, constraints) => SingleChildScrollView(
|
||||||
child: SingleChildScrollView(
|
child: SingleChildScrollView(
|
||||||
scrollDirection: Axis.horizontal,
|
scrollDirection: Axis.horizontal,
|
||||||
child: ConstrainedBox(
|
child: ConstrainedBox(
|
||||||
constraints:
|
constraints: BoxConstraints(minWidth: constraints.maxWidth),
|
||||||
BoxConstraints(minWidth: constraints.maxWidth),
|
child: Table(
|
||||||
child: DataTable(
|
defaultColumnWidth: const IntrinsicColumnWidth(),
|
||||||
headingRowColor: WidgetStateProperty.all(
|
border: TableBorder(
|
||||||
const Color(0xFFF0F4FF)),
|
horizontalInside: BorderSide(
|
||||||
dataRowColor: WidgetStateProperty.resolveWith((states) {
|
color: Colors.grey.shade200,
|
||||||
if (states.contains(WidgetState.hovered)) {
|
width: 0.5,
|
||||||
return const Color(0xFFF5F7FF);
|
),
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}),
|
|
||||||
headingTextStyle: const TextStyle(
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
color: AppTheme.primaryDark,
|
|
||||||
),
|
),
|
||||||
dataTextStyle: const TextStyle(
|
children: [
|
||||||
fontSize: 13, color: AppTheme.textPrimary),
|
_buildHeaderRow(),
|
||||||
columnSpacing: 24,
|
for (int i = 0; i < widget.rows.length; i++)
|
||||||
horizontalMargin: 16,
|
_buildDataRow(i, widget.rows[i]),
|
||||||
dataRowMinHeight: 40,
|
],
|
||||||
dataRowMaxHeight: 56,
|
|
||||||
dividerThickness: 0.5,
|
|
||||||
columns: columns,
|
|
||||||
rows: rows,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -70,7 +73,7 @@ class DataTableCard extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
// Pagination
|
// Pagination
|
||||||
if (totalCount != null)
|
if (widget.totalCount != null)
|
||||||
Container(
|
Container(
|
||||||
height: 48,
|
height: 48,
|
||||||
color: AppTheme.surface,
|
color: AppTheme.surface,
|
||||||
@@ -78,16 +81,16 @@ class DataTableCard extends StatelessWidget {
|
|||||||
child: Row(
|
child: Row(
|
||||||
children: [
|
children: [
|
||||||
Text(
|
Text(
|
||||||
'共 $totalCount 条记录',
|
'共 ${widget.totalCount} 条记录',
|
||||||
style: const TextStyle(
|
style: const TextStyle(
|
||||||
fontSize: 13, color: AppTheme.textSecondary),
|
fontSize: 13, color: AppTheme.textSecondary),
|
||||||
),
|
),
|
||||||
const Spacer(),
|
const Spacer(),
|
||||||
_PaginationBar(
|
_PaginationBar(
|
||||||
page: page,
|
page: widget.page,
|
||||||
total: totalCount!,
|
total: widget.totalCount!,
|
||||||
pageSize: pageSize,
|
pageSize: widget.pageSize,
|
||||||
onPageChanged: onPageChanged,
|
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 {
|
class _PaginationBar extends StatelessWidget {
|
||||||
|
|||||||
Reference in New Issue
Block a user