flutter - 滚动/跳转到 Flutter GridView 中的正确位置

问题描述

我在 GridView 中创建日历界面。我想滚动到当月的第一天。但是，每当我尝试滚动到我计算的位置时，它都是错误的。我目前正在使用日历的 2016 年 1 月 1 日的起点。我目前为每个日历行使用固定高度，但它仍然没有滚动到正确的位置。

注意：以下图片生成于 2019 年 10 月 11 日。我正在尝试自动滚动到 2019 年 10 月 1 日。

在纵向它滚动太远：

当我旋转到横向时，滚动不够：

创建 GridView：

  double calendarHeight = 100.0;
  ...
  @override
  Widget build(BuildContext context) {
    // Get the size of the screen
    var size = MediaQuery.of(context).size;
    var ratio = size.width / calendarHeight / 7; // Divide ratio by 7 because there are 7 columns

    Scaffold scaffold = Scaffold(
      ...
      body: new Stack(
        children: <Widget>[
          new PageView(
            children: <Widget>[
              // Calendar Page
              new Container(
                child: new Center(
                  child: GridView.builder(
                    gridDelegate: _calendarGridDelegate(ratio),
                    controller: scrollController,
                    itemCount: _calendarDates.length,
                    itemBuilder: (BuildContext context, int index) {
                      if (index < _calendarDates.length) {
                        return _calendarItemBuilder(index);
                      } else
                        return null;
                    },
                  ),
                ),
                color: Colors.blue,
              ),
              ...

    WidgetsBinding.instance.addPostFrameCallback((_) {
      double scrollTo = (dayInList ~/ 7) * calendarHeight;
      ...
      scrollController.jumpTo(scrollTo);
    });

    return scaffold;

创建网格委托：

/// Defines the [SliverGridDelegateWithFixedCrossAxisCount] grid delegate used
/// by the calendar page
SliverGridDelegateWithFixedCrossAxisCount _calendarGridDelegate(double ratio) {
  return new SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: ratio,
          crossAxisCount: 7,
          mainAxisSpacing: _MAIN_AXIS_SPACING, // _MAIN_AXIS_SPACING = 1.0
          crossAxisSpacing: _CROSS_AXIS_SPACING); // _CROSS_AXIS_SPACING = 1.0
}

在日历中创建一天的内容：

/// Builds a [Widget] for one calendar day in the calendar page
Widget _calendarItemBuilder(int index) {
  String output;
  if (_calendarDates[index].day == 1) {
    output = Constants().monthNames[_calendarDates[index].month - 1] +
        " " +
        _calendarDates[index].day.toString();
  } else {
    output = _calendarDates[index].day.toString();
  }

  return new Container(
    padding: EdgeInsets.all(5.0),
    child: new Center(
      child: Text(output),
    ),
  );
}

标签： flutterflutter-layoutflutter-sliverflutter-gridview

flutter - 滚动/跳转到 Flutter GridView 中的正确位置

问题描述

解决方案

推荐阅读