我有某种时间表,其中包含小时数和天数
Widget _buildSchedule(ScheduleLoaded state) {
final List<Widget> days = state.range.days.map((DateTime day) {
return Column(
children:
_buildTimeSlots(day, state.timeSlots.toList()),
);
}).toList();
return ListView( scrollDirection: Axis.horizontal, children: days);
}
现在我正在尝试使其也可以垂直滚动(分别按天或所有屏幕)
Widget _buildSchedule(ScheduleLoaded state) {
final List<Widget> days = state.range.days.map((DateTime day) {
return ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: _buildTimeSlots(day, state.timeSlots.toList())
);
}).toList();
return ListView( scrollDirection: Axis.horizontal, children: days);
}
根据 SO 嵌套的相关答案ListView with shrinkWrap
and ClampingScrollPhysics
应该可以工作,但第二个版本无法呈现错误'constraints.hasBoundedWidth':不正确。
以下是如何使用 SingleChildScrollView 双向滚动,
class MultiDirectionalScrollView extends StatefulWidget {
const MultiDirectionalScrollView({Key? key}) : super(key: key);
@override
_MultiDirectionalScrollViewState createState() =>
_MultiDirectionalScrollViewState();
}
class _MultiDirectionalScrollViewState
extends State<MultiDirectionalScrollView> {
Widget cell(int rowX, int colY) {
return Container(
width: 100,
height: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
border:
Border.all(color: Colors.grey.withOpacity(0.45), width: 1.0)),
child: Text('row $rowX\ncol $colY'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('multi Direction scroll'),
),
body: InteractiveViewer( // Interactive viewer can be removed
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
children: List.generate(
100,
(indexX) => Row(
children: List.generate(
100, (indexY) => cell(indexX, indexY)))),
),
),
),
),
);
}
}
Heres a 尝试一下。
Output
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)