具有多个滚动方向的颤振列表视图

Question

我有某种时间表，每天都有几小时

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

现在，我正尝试使其也可以通过Verticale滚动（分别按天或全屏滚动）

  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的相关答案，嵌套{strong> ListView 并带有shrinkWrap和ClampingScrollPhysics应该可以，但是第二个版本不能以错误约束来呈现。 hasBoundedWidth'：不正确。

Answer 1

下面的代码提供了如果您的时隙具有固定宽度的需求。如果我误解了您的需求，请纠正我。

Widget _buildSchedule() {
        return ListView(
            scrollDirection: Axis.horizontal,
            children: List<int>.generate(10, (i) => i).map((i) {
                return Container(
                    width: 200.0,
                  child: ListView(
                      //shrinkWrap: true,
                      //physics: ClampingScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      children: List<int>.generate(Random().nextInt(20) + 1, (i) => i).map((j) {
                          return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                  color: Colors.grey,
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text(
                                      "$j item of $i row"
                                  )
                              ),
                          );
                      }).toList()
                  ),
                );
            }).toList()
        );
    }

Answer 2

以下是使用 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)))),
            ),
          ),
        ),
      ),
    );
  }
}

这里有一个 dartpad sample 可以尝试。

输出