flutter 实现可横滑table表格

需求：实现可横滑、竖滑动表格，保持第一列不动

git 链接：https://gitee.com/niliusha/flutter_demo.git

参考链接

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fuxi_knowledge/constants/color_constant.dart';

import '../../../../../constants/route_constant.dart';
import '../../../../../router/router_delegate.dart';

class ApplicationScrollTablePage extends StatefulWidget {
  final Map<String, dynamic>? originalParams;

  const ApplicationScrollTablePage({Key? key, this.originalParams})
      : super(key: key);

  @override
  State<ApplicationScrollTablePage> createState() =>
      _ApplicationScrollTablePageState();
}

class _ApplicationScrollTablePageState
    extends State<ApplicationScrollTablePage> {
  final List<String> _titleList = [
    "标题1",
    "标题2",
    "标题3",
    "标题4",
    "标题5",
    "标题6",
    "标题7"
  ];
  final List<String> _columnList = [];
  final double _leftWidth = 30.w;
  final double _cellWidth = 100.w;
  final double _cellHeight = 28.h;
  final ScrollController _titleController = ScrollController();
  final ScrollController _contentController = ScrollController();

  @override
  void initState() {
    super.initState();
    _titleController.addListener(_updateContent);
    _contentController.addListener(_updateTitle);
    //测试数据
    for (int i = 0; i < 10; i++) {
      _columnList.add(i.toString());
    }
  }

  void _updateTitle() {
    if (_titleController.offset != _contentController.offset) {
      _titleController.jumpTo(_contentController.offset);
    }
  }

  void _updateContent() {
    if (_contentController.offset != _titleController.offset) {
      _contentController.jumpTo(_titleController.offset);
    }
  }

  @override
  void dispose() {
    _titleController.removeListener(_updateContent);
    _contentController.removeListener(_updateTitle);
    super.dispose();
  }

  Container _buildTitleContainer(int i) {
    return Container(
      decoration: const BoxDecoration(
          color: colorWhite51,
          border: Border(
            // bottom: BorderSide(color: tableTitleLineColor, width: 1),
              right: BorderSide(color: tableTitleLineColor, width: 1))),
      alignment: Alignment.center,
      width: _cellWidth,
      height: _cellHeight,
      child: Text(
        _titleList[i],
        style: TextStyle(color: Colors.white, fontSize: 12.sp),
      ),
    );
  }

  _buildRightTitle() {
    List<Widget> list = [];
    for (int i = 0; i < _titleList.length; i++) {
      list.add(_buildTitleContainer(i));
    }
    return list;
  }

  _buildRightContent(int index) {
    List<Widget> list = [];
    for (int i = 0; i < _titleList.length; i++) {
      list.add(Container(
        alignment: const Alignment(0, 0),
        decoration: const BoxDecoration(
            border: Border(
                bottom: BorderSide(color: tableLineColor, width: 1),
                right: BorderSide(color: tableLineColor, width: 1))),
        width: _cellWidth,
        height: _cellHeight,
        child: Text(
          "行$index 列${i + 1}",
          style: TextStyle(color: color153, fontSize: 10.sp),
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(top: 12.h),
              decoration: const BoxDecoration(
                  color: colorWhite51,
                  border: Border(
                    // bottom: BorderSide(color: tableTitleLineColor, width: 1),
                      right: BorderSide(color: tableTitleLineColor, width: 1))),
              width: _leftWidth,
              height: _cellHeight,
              alignment: Alignment.center,
              // child: Text(
              //   '标题',
              //   style: TextStyle(color: Colors.white, fontSize: 12.sp),
              // ),
            ),
            Expanded(
                child: Container(
                  margin: EdgeInsets.only(top: 12.h),
                  width: _titleList.length * _cellWidth,
                  child: SingleChildScrollView(
                    controller: _titleController,
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: _buildRightTitle(),
                    ),
                  ),
                ))
          ],
        ),
        Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: _leftWidth,
                        child: ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemBuilder: (context, index) {
                            return GestureDetector(
                                onTap: () {},
                                child: Container(
                                    alignment: const Alignment(0, 0),
                                    decoration: const BoxDecoration(
                                        border: Border(
                                            bottom: BorderSide(
                                                color: color135_40, width: 1),
                                            right: BorderSide(
                                                color: color135_40, width: 1))),
                                    width: _cellWidth,
                                    height: _cellHeight,
                                    child: Icon(Icons.expand,
                                        color: color153, size: 20.r)));
                          },
                          itemCount: _columnList.length,
                        ),
                      ),
                      Expanded(
                          child: SingleChildScrollView(
                            controller: _contentController,
                            scrollDirection: Axis.horizontal,
                            child: SizedBox(
                              width: _titleList.length * _cellWidth,
                              child: ListView.builder(
                                itemCount: _columnList.length,
                                shrinkWrap: true,
                                physics: const NeverScrollableScrollPhysics(),
                                itemBuilder: (context, index) {
                                  return GestureDetector(
                                    onTap: () {},
                                    child: Row(
                                      children: _buildRightContent(index),
                                    ),
                                  );
                                },
                              ),
                              // ),
                            ),
                          ))
                    ],
                  ),
                ],
              ),
            ))
      ],
    );
  }
}