实现效果图

主要实现的功能

1.当上下滑动时冻结首行

1.当左右拖拽滚动条滑动时冻结第一列和最后一列

实现鼠标滚轮上下滑动,和左右拖拽滚动条滑动

主要思路

1.分块;
2.使用ListVeiw
3.使用linked_scroll_controller: ^0.2.0插件进行多个listview进行组合滑动
4.项目工程中隐藏滚动条,只在此界面中使用Scrollbar组件进行显示(要不然每一个listView都会出现滚动条)

主要代码

import 'package:flutter/material.dart';
import 'package:ui_state/state_widget.dart';
import '../../../../system/kit.dart';
import 'logic.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("学生信息采集"),
      ),
      body: kit.body(
        child: StateWidget(
          logic: StudentInformationLogic(context),
          builder: (logic) => Container(
            decoration: BoxDecoration(
                border: Border.all(width: .5, color: Colors.grey.shade500)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                              width: .5, color: Colors.grey.shade500)),
                      height: 90,
                      width: 100,
                      child: const Center(
                        child: Text("姓名"),
                      ),
                    ),
                    Expanded(
                      child: SizedBox(
                        width: 100,
                        child: ListView.builder(
                          controller: logic.scrollController1,
                          itemCount: logic.state.leftList.length,
                          itemExtent: 30,
                          itemBuilder: (context, index) {
                            LeftItem item = logic.state.leftList[index];
                            return Container(
                              width: 100,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      width: .5, color: Colors.grey.shade500)),
                              child: Center(
                                child: Text(item.title),
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: Column(
                    children: [
                      SizedBox(
                        height: 90,
                        child: ListView.builder(
                          controller: logic.scrollController4,
                          scrollDirection: Axis.horizontal,
                          itemExtent: 150,
                          itemBuilder: (context, index) {
                            TopItem topItem = logic.state.topList[index];
                            return Container(
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      width: .5,
                                      color: Colors.grey.shade500)),
                              width: 150,
                              height: 90,
                              child: Column(
                                children: [
                                  Text(topItem.title),
                                  Text(topItem.subTitle),
                                  Text(topItem.import),
                                ],
                              ),
                            );
                          },
                          itemCount: logic.state.topList.length,
                        ),
                      ),
                      Expanded(
                        child: SingleChildScrollView(
                          controller: logic.scrollController3,
                          scrollDirection: Axis.vertical,
                          child: SizedBox(
                            height: 1500,
                            child: ListView.builder(
                              controller: logic.scrollController5,
                              itemCount: logic.state.courseList.length,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, index) {
                                CourseItem item = logic.state.courseList[index];
                                return Column(
                                    children: List.generate(
                                  item.value.length,
                                  (indexT) => Container(
                                    width: 150,
                                    height: 30,
                                    decoration: BoxDecoration(
                                        border: Border.all(
                                            width: .5,
                                            color: Colors.grey.shade500)),
                                    child: Center(
                                      child: Text("${item.value[indexT]}分"),
                                    ),
                                  ),
                                ));
                              },
                            ),
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 10,
                        child: Scrollbar(
                          thumbVisibility: true,
                          scrollbarOrientation: ScrollbarOrientation.bottom,
                          controller: logic.scrollController6,
                          child: ListView.builder(
                            controller: logic.scrollController6,
                            scrollDirection: Axis.horizontal,
                            itemExtent: 150,
                            itemBuilder: (context, index) {
                              return Container();
                            },
                            itemCount: logic.state.topList.length,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Column(
                  children: [
                    GestureDetector(
                      onTap:logic.addSomeData,
                      child: Container(
                        height: 90,
                        width: 100,
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: .5, color: Colors.grey.shade500)),
                        child: const Center(
                          child: Text("操作"),
                        ),
                      ),
                    ),
                    Expanded(
                      child: SizedBox(
                        width: 100,
                        child: Scrollbar(
                          thumbVisibility: true,
                          controller: logic.scrollController2,
                          child: ListView.builder(
                            itemCount: logic.state.rightList.length,
                            controller: logic.scrollController2,
                            itemExtent: 30,
                            itemBuilder: (context, index) {
                              RightItem item = logic.state.rightList[index];
                              return Container(
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        width: .5,
                                        color: Colors.grey.shade500)),
                                width: 100,
                                child: Center(
                                  child: Text(item.title),
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}