我正在尝试创建一个表,该表在垂直滚动时将第一行固定在可见的布局上,但在正常情况下水平滚动,而在第一列中则滚动一些。
通知和手势检测器
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)),
],
);
},
),
),
),
),
),
],
),
),
],
),
),
],
),
);
}
}
此代码正在运行,但不正确。第一行在垂直滚动的同时继续滚动,而在表水平滚动时尝试滚动的列也是如此。如果垂直滚动或仅水平滚动,有什么方法可以识别并传递给父级?