如何在Flutter的Table中使用TableRowInkWell？求左右行交互不同的表格示例

没问题！我来一步步帮你解决这些问题——从TableRowInkWell的基础用法，到实际应用案例，再到你需要的「左侧可点击、右侧不可点击」的美观表格实现，都安排上。

一、TableRowInkWell的基础用法 #

TableRowInkWell是Flutter Material库专门为TableRow设计的交互组件，用来给表格行（或行内部分单元格）添加Material风格的墨水涟漪点击效果。它的核心用法很简单：

• 把它作为TableRow的子组件，包裹你需要添加点击交互的单元格
• 通过onTap、onLongPress等回调处理点击事件
• 注意：它必须放在Table组件的上下文中，因为依赖Material的墨水效果系统

基础使用片段：

TableRow(
  children: [
    TableRowInkWell(
      onTap: () => print('左侧单元格被点击'),
      child: TableCell(
        child: Padding(
          padding: EdgeInsets.all(12),
          child: Text('可点击操作'),
        ),
      ),
    ),
    TableCell(
      child: Padding(
        padding: EdgeInsets.all(12),
        child: Text('不可点击详情'),
      ),
    ),
  ],
)

二、TableRowInkWell的实际使用情况 #

当然有很多开发者用它制作表格！尤其是在需要Material设计风格的交互时，TableRowInkWell比手动给TableRow套InkWell更适配——它会自动匹配TableRow的布局，避免涟漪效果超出单元格范围或者出现布局偏移的问题。很多后台管理系统、数据展示页面都会用它来实现行内部分区域的点击交互。

三、左侧可点击、右侧不可点击的美观表格完整示例 #

下面是一个兼顾美观性和交互逻辑的完整实现：

• 左侧单元格带墨水涟漪点击效果，右侧单元格无交互
• 包含标题行、内容行的样式区分
• 添加了圆角边框、内边距、文字样式优化，让表格更精致

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('可交互表格示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Table(
            // 带圆角的表格边框，视觉更柔和
            border: TableBorder.all(
              color: Colors.grey.shade300,
              width: 1,
              borderRadius: BorderRadius.circular(8),
            ),
            // 设置列宽比例，左侧占1/3，右侧占2/3
            columnWidths: const {
              0: FlexColumnWidth(1),
              1: FlexColumnWidth(2),
            },
            children: [
              // 标题行
              TableRow(
                decoration: BoxDecoration(
                  color: Colors.grey.shade50,
                ),
                children: [
                  TableCell(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                      child: Text(
                        '操作项',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.grey.shade700,
                        ),
                      ),
                    ),
                  ),
                  TableCell(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                      child: Text(
                        '详情内容',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.grey.shade700,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              // 内容行1
              TableRow(
                children: [
                  TableRowInkWell(
                    onTap: () => print('触发第一行编辑操作'),
                    splashColor: Colors.blue.shade100,
                    highlightColor: Colors.blue.shade50,
                    child: TableCell(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                        child: Row(
                          children: const [
                            Icon(Icons.edit, size: 18, color: Colors.blue),
                            SizedBox(width: 8),
                            Text('编辑'),
                          ],
                        ),
                      ),
                    ),
                  ),
                  TableCell(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                      child: Text(
                        '这是第一行的详情信息，点击左侧可触发编辑',
                        style: TextStyle(color: Colors.grey.shade600),
                      ),
                    ),
                  ),
                ],
              ),
              // 内容行2
              TableRow(
                children: [
                  TableRowInkWell(
                    onTap: () => print('触发第二行删除操作'),
                    splashColor: Colors.red.shade100,
                    highlightColor: Colors.red.shade50,
                    child: TableCell(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                        child: Row(
                          children: const [
                            Icon(Icons.delete, size: 18, color: Colors.red),
                            SizedBox(width: 8),
                            Text('删除'),
                          ],
                        ),
                      ),
                    ),
                  ),
                  TableCell(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                      child: Text(
                        '这是第二行的详情信息，点击左侧可触发删除',
                        style: TextStyle(color: Colors.grey.shade600),
                      ),
                    ),
                  ),
                ],
              ),
              // 内容行3
              TableRow(
                children: [
                  TableRowInkWell(
                    onTap: () => print('触发第三行查看操作'),
                    splashColor: Colors.orange.shade100,
                    highlightColor: Colors.orange.shade50,
                    child: TableCell(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                        child: Row(
                          children: const [
                            Icon(Icons.visibility, size: 18, color: Colors.orange),
                            SizedBox(width: 8),
                            Text('查看'),
                          ],
                        ),
                      ),
                    ),
                  ),
                  TableCell(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                      child: Text(
                        '这是第三行的详情信息，点击左侧可触发查看',
                        style: TextStyle(color: Colors.grey.shade600),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例的核心亮点：

• 用TableBorder实现了带圆角的表格边框，避免生硬的直角
• 标题行用浅灰背景+加粗文字区分，提升可读性
• 左侧可点击单元格自定义了涟漪和高亮颜色，搭配图标增强交互提示
• 右侧单元格未包裹在TableRowInkWell内，点击不会触发任何交互
• 通过columnWidths设置合理的列宽比例，让布局更协调

内容的提问来源于stack exchange，提问作者Daniel Mana