在FLUTTER

时间:2019-10-23 06:01:44

标签: flutter

我正在尝试创建一个表,该表在垂直滚动时将第一行固定在可见的布局上,但在正常情况下水平滚动,而在第一列中则滚动一些。

通知和手势检测器

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)),
                                    ],
                                  );
                                },
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

        ],
      ),
    );
  }
}

此代码正在运行,但不正确。第一行在垂直滚动的同时继续滚动,而在表水平滚动时尝试滚动的列也是如此。如果垂直滚动或仅水平滚动,有什么方法可以识别并传递给父级?

0 个答案:

没有答案