Flutter多方向滚动的列表视图

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

现在我正在尝试使它在垂直方向上可以滚动，分别按照日期或整个屏幕滚动。

  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上相关答案，使用shrinkWrap和ClampingScrollPhysics的嵌套ListView应该可以工作，但第二个版本由于错误'constraints.hasBoundedWidth': is not true.而无法呈现。

- Ilya Sulimanov

Answer 1

以下是使用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样本可供尝试。

输出

- Mahesh Jamdade

Answer 2

以下代码适用于您的时间段具有固定宽度的情况。如果我误解了您的需求，请纠正我。

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

- Bohdan Uhrynovskiy