Flutter 在颤振中具有固定第一行和固定第一列的可滚动表

我正在尝试创建一个表，该表将第一行固定在可见布局上，同时垂直滚动，但通常水平滚动，而第一列固定为some

通知和手势检测器

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class FixedColumn {
  String valueColumn;
  FixedColumn({this.valueColumn});
}

List<FixedColumn> fixedColumn = [
  FixedColumn(valueColumn: 'Y1'),
  FixedColumn(valueColumn: 'Y2'),
  FixedColumn(valueColumn: 'Y3'),
  FixedColumn(valueColumn: 'Y4'),
  FixedColumn(valueColumn: 'Y5'),
  FixedColumn(valueColumn: 'Y6'),
  FixedColumn(valueColumn: 'Y7'),
  FixedColumn(valueColumn: 'Y8'),
  FixedColumn(valueColumn: 'Y9'),
  FixedColumn(valueColumn: 'Y10'),
  FixedColumn(valueColumn: 'Y11'),
  FixedColumn(valueColumn: 'Y12'),
  FixedColumn(valueColumn: 'Y13'),
  FixedColumn(valueColumn: 'Y14'),
  FixedColumn(valueColumn: 'Y15'),
  FixedColumn(valueColumn: 'Y16'),
  FixedColumn(valueColumn: 'Y17'),
  FixedColumn(valueColumn: 'Y18'),
  FixedColumn(valueColumn: 'Y19'),
  FixedColumn(valueColumn: 'Y20'),
  FixedColumn(valueColumn: 'Y21'),
  FixedColumn(valueColumn: 'Y22'),
  FixedColumn(valueColumn: 'Y23'),
  FixedColumn(valueColumn: 'Y24'),

];

class FixedRow {
  String valueRow;
  FixedRow({this.valueRow});
}

List<FixedRow> fixedRow = [
  FixedRow(valueRow: 'X1'),
  FixedRow(valueRow: 'X2'),
  FixedRow(valueRow: 'X3'),
  FixedRow(valueRow: 'X4'),
  FixedRow(valueRow: 'X5'),
  FixedRow(valueRow: 'X6'),

];

class Content {
  String vC1;
  String vC2;
  String vC3;
  String vC4;
  String vC5;
  String vC6;

  Content({this.vC1, this.vC2, this.vC3, this.vC4, this.vC5, this.vC6});
}

List<Content> valueContent = [
  Content(vC1: 'FIRST', vC2: '2z', vC3: '3', vC4: '4', vC5: '5', vC6: 
'6'),
  Content(vC1: '2', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '3', vC2: '2', vC3: '3z', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '4', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '5', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '6', vC2: '2', vC3: '3', vC4: '4z', vC5: '5', vC6: '6'),
  Content(vC1: '7', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '8', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '9', vC2: '2', vC3: '3', vC4: '4', vC5: '5z', vC6: '6'),
  Content(vC1: '10', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '11', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '12', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6z'),
  Content(vC1: '13', vC2: '2z', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '14', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '15', vC2: '2', vC3: '3z', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '16', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '17', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '18', vC2: '2', vC3: '3', vC4: '4z', vC5: '5', vC6: '6'),
  Content(vC1: '19', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '20', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '21', vC2: '2', vC3: '3', vC4: '4', vC5: '5z', vC6: '6'),
  Content(vC1: '22', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '23', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: '6'),
  Content(vC1: '24', vC2: '2', vC3: '3', vC4: '4', vC5: '5', vC6: 'LAST'),
];

class PlayGround extends StatefulWidget {
  @override
  _PlayGroundState createState() => _PlayGroundState();
}
ScrollController controller = ScrollController();

class _PlayGroundState extends State<PlayGround> {
  double viewOffSet = 0.0;

  changePosition(ScrollNotification notification) {
    setState(() {
      if (notification is ScrollUpdateNotification) {
        viewOffSet = viewOffSet + notification.scrollDelta;
        controller.jumpTo(viewOffSet);
      }
    });
  }
  double widthVal = 80.0;
  double heightVal = 30.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF0F8FF),
      appBar: AppBar(title: Text('SCROLLABLE TABLE')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Flexible(
            child: Padding(
              padding: const EdgeInsets.only(left: 80.0),
              child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  controller: controller,
                  physics: NeverScrollableScrollPhysics(),
                  child: Container(
                    height: heightVal,
                    child: ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      controller: controller,
                      itemCount: fixedRow.length,
                      itemBuilder: (context, index) {
                        return Container(
                            alignment: Alignment.center,
                            color: Color(0xFF03A9F4),
                            width: widthVal,
                            height: heightVal,
                            child: Text(
                              fixedRow[index].valueRow,
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ));
                      },
                    ),
                  )),
            ),
          ),

          Expanded(flex:1,
            child: Column(mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Row(mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Flexible(flex:1,
                        child: Container(
                          height: heightVal*fixedColumn.length,
                          width: widthVal,
                          child: ListView.builder(
                              physics: NeverScrollableScrollPhysics(),
                            controller: controller,
                              itemCount: fixedColumn.length,
                              itemBuilder: (context, index) {
                                return Container(
                                    alignment: Alignment.center,
                                    color: Color(0xFF03A9F4),
                                    height: heightVal,
                                    width: widthVal,
                                    child: Text(fixedColumn[index].valueColumn,
                                        style: TextStyle(
                                          color: Colors.white,
                                        )));
                              }),
                        ),
                      ),
                      Expanded(flex:4,
                        child: NotificationListener(
    onNotification: (ScrollNotification notification) {
                            changePosition(notification);
                            return;
                          },
                          child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: Container(

                              width: widthVal*fixedRow.length,
                              child:  ListView.builder(
                                shrinkWrap: true,
                                scrollDirection: Axis.vertical,
                                itemCount: valueContent.length,
                                itemBuilder: (context, index) {
                                  return Row(
                                    children: <Widget>[
                                      Row(crossAxisAlignment: CrossAxisAlignment.center,
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          Container(alignment: Alignment.center,
                                              width: widthVal,
                                              height: heightVal,
                                              child: Text(
                                                  valueContent[index].vC1)),
                                        ],
                                      ),
                                      Container(
                                          alignment: Alignment.center,
                                          width: widthVal,
                                          height: heightVal,
                                          child: Text(
                                              valueContent[index].vC2)),
                                      Container(
                                          alignment: Alignment.center,
                                          width: widthVal,
                                          height: heightVal,
                                          child: Text(
                                              valueContent[index].vC3)),
                                      Container(
                                          alignment: Alignment.center,
                                          width: widthVal,
                                          height: heightVal,
                                          child: Text(
                                              valueContent[index].vC4)),
                                      Container(
                                          alignment: Alignment.center,
                                          width: widthVal,
                                          height: heightVal,
                                          child: Text(
                                              valueContent[index].vC5)),
                                      Container(
                                          alignment: Alignment.center,
                                          width: widthVal,
                                          height: heightVal,
                                          child: Text(
                                              valueContent[index].vC6)),
                                    ],
                                  );
                                },
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

        ],
      ),
    );
  }
}

import'包装：flift/cupertino.dart'；
进口“包装：颤振/材料.省道”；
导入“package:flatter/widgets.dart”；
类固定列{
字符串值列；
FixedColumn（{this.valueColumn}）；
}
列表固定列=[
FixedColumn（valueColumn:'Y1'），
FixedColumn（valueColumn:'Y2'），
FixedColumn（valueColumn:'Y3'），
FixedColumn（valueColumn:'Y4'），
FixedColumn（valueColumn:'Y5'），
FixedColumn（valueColumn:'Y6'），
FixedColumn（valueColumn:'Y7'），
FixedColumn（valueColumn:'Y8'），
FixedColumn（valueColumn:'Y9'），
FixedColumn（valueColumn:'Y10'），
FixedColumn（值列：“Y11”），
FixedColumn（值列：“Y12”），
FixedColumn（值列：“Y13”），
FixedColumn（值列：“Y14”），
FixedColumn（值列：“Y15”），
FixedColumn（值列：“Y16”），
FixedColumn（值列：“Y17”），
FixedColumn（值列：“Y18”），
FixedColumn（值列：“Y19”），
FixedColumn（valueColumn:'Y20'），
FixedColumn（valueColumn:'Y21'），
FixedColumn（valueColumn:'Y22'），
FixedColumn（valueColumn:'Y23'），
FixedColumn（valueColumn:'Y24'），
];
类固定流{
字符串值行；
FixedRow（{this.valueRow}）；
}
列表修复路径=[
FixedRow（valueRow:'X1'），
FixedRow（valueRow:'X2'），
FixedRow（valueRow:'X3'），
FixedRow（valueRow:'X4'），
FixedRow（valueRow:'X5'），
FixedRow（valueRow:'X6'），
];
课堂内容{
字符串vC1；
字符串vC2；
字符串vC3；
字符串vC4；
字符串vC5；
字符串vC6；
内容（{this.vC1，this.vC2，this.vC3，this.vC4，this.vC5，this.vC6}）；
}
列表值内容=[
内容（vC1:'FIRST'，vC2:'2z'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:
'6'),
内容（vC1:'2'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'3'，vC2:'2'，vC3:'3z'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'4'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'5'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'6'，vC2:'2'，vC3:'3'，vC4:'4z'，vC5:'5'，vC6:'6'），
内容（vC1:'7'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'8'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'9'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5z'，vC6:'6'），
内容（vC1:'10'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'11'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'12'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6z'），
内容（vC1:'13'，vC2:'2z'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'14'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'15'，vC2:'2'，vC3:'3z'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'16'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'17'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'18'，vC2:'2'，vC3:'3'，vC4:'4z'，vC5:'5'，vC6:'6'），
内容（vC1:'19'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'20'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'21'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5z'，vC6:'6'），
内容（vC1:'22'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'23'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'6'），
内容（vC1:'24'，vC2:'2'，vC3:'3'，vC4:'4'，vC5:'5'，vC6:'LAST'），
];
类扩展StatefulWidget{
@凌驾
_PlayGroundState createState（）；
}
ScrollController=ScrollController（）；
类(PlayGroundState扩展状态){
双视图偏移=0.0；
更改位置（滚动通知）{
设置状态（）{
如果（通知为ScrollUpdateNotification）{
viewOffSet=viewOffSet+notification.scrollDelta；
控制器。跳到（视图偏移）；
}
});
}
双宽度VAL=80.0；
双高val=30.0；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：颜色（0xFFF0F8FF），
appBar:appBar（标题：文本（“可滚动表格”），
正文：专栏(
crossAxisAlignment:crossAxisAlignment.start，
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
灵活的(
孩子：填充(
填充：仅限常量边集（左：80.0），
子：SingleChildScrollView(
滚动方向：轴水平，
控制器：控制器，
物理学：NeverscrollableScroll物理学（），
子：容器(
高度：heightVal，
子项：ListView.builder(
收缩膜：对，
滚动方向：轴水平，
控制器：控制器，
itemCount:fixedRow.length，
itemBuilder：（上下文，索引）{
返回容器(
对齐：对齐.center，
颜色：颜色（0xFF03A9F4），
宽度：widthVal，
高度：heightVal，
子：文本(
fixedRow[index]。valueRow，
样式：TextStyle(
颜色：颜色，白色，
),
));
},
),
)),
),
),
扩展（flex:1，
子项：列（mainAxisSize:mainAxisSize.max，crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
扩大(
子级：行（mainAxisSize:mainAxisSize.max，crossAxisAlignment:crossAxisAlignment.end，
儿童：[