1

Есть два вложенных ListView (в вертикальный вложен горизонтальный). Пробую сделать так, чтобы при прокрутке списка элемент всегда вставал в начало или середину страницы, чтобы был виден целиком (в вертикальной ориентации - в середину, в ландшафте - в начало страницы)

В прилагаемом примере видно, что при прокрутке списка элемент занимает нужную позицию, но при этом он не сразу встает на нужное место, а после колебания, как бы с инерцией. Как убрать эту инерцию, чтобы элемент списка сразу вставал в нужную позицию (по аналогии с PageView)

Сразу скажу, что реализация с PageView у меня не получилась, так как в альбомной ориентации на странице показывает 1 элемент списка, а нужны все, которые помещаются

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<ScrollController> _horizontalControllers;

  ScrollController _verticalController;

  var _itemCountHorizontal = 15;

  bool _inProgress;

  Orientation get isPortrait => MediaQuery.of(context).orientation;

  double get _height => MediaQuery.of(context).size.height;
  double get _width => MediaQuery.of(context).size.width;

  double get horizontalPadding {
    double _padd;
    if (isPortrait == Orientation.portrait) {
      _padd = _width * 0.01;
    } else {
      _padd = _width * 0.01;
    }
    return _padd;
  }

  double get verticalPadding {
    double _padd;
    if (isPortrait == Orientation.portrait) {
      _padd = cardHeight * 0.005;
    } else {
      _padd = (_height - cardHeight) / 2;
    }
    return _padd;
  }

  double get cardHeight {
    double cardH;
    if (isPortrait == Orientation.portrait) {
      cardH = cardWidth * 1.7;
    } else {
      cardH = _height * 0.9;
    }
    return cardH;
  }

  double get cardWidth {
    var cardW = _width * 0.99;
    if (cardW > _height / 1.7) {
      cardW = _height / 1.77;
    }
    return cardW;
  }

  @override
  void initState() {
    _horizontalControllers = [
      ScrollController(),
      ScrollController(),
      ScrollController(),
      ScrollController(),
      ScrollController(),
    ];
    _verticalController = ScrollController();
    _inProgress = false;
    super.initState();
  }

  @override
  void dispose() {
    _horizontalControllers.forEach((element) {
      element.dispose();
    });
    _verticalController.dispose();
    super.dispose();
  }

  void _onEndScrollVertical(ScrollMetrics metrics) {
    print("scroll before = ${metrics.extentBefore}");
    print("scroll after = ${metrics.extentAfter}");
    print("scroll inside = ${metrics.extentInside}");
    print("index = ${metrics.axisDirection}");
    print("item HEIGHT => $cardHeight");
    final topPadd = MediaQuery.of(context).padding.top;
    print('TOPPPPPPPPPP $topPadd');

    /*  int point = metrics.extentAfter ~/ (_height - topPadd);

    var offset = (_height - topPadd) * point;
    _inProgress = true;
    Future.delayed(Duration(milliseconds: 100), () {
      _verticalController.animateTo(offset,
          duration: Duration(milliseconds: 1000), curve: Curves.fastOutSlowIn);
    });
    _inProgress = false;
    */

    var halfOfTheHeight = cardHeight / 2;
    var offsetOfItem = metrics.extentBefore % cardHeight;
    if (offsetOfItem < halfOfTheHeight) {
      final offset = metrics.extentBefore - offsetOfItem;
      print("offsetOfItem1 = $offsetOfItem offset = $offset");
      Future.delayed(Duration(milliseconds: 50), () {
        _verticalController.animateTo(offset,
            duration: Duration(milliseconds: 1000),
            curve: Curves.fastOutSlowIn);
      });
    } else if (offsetOfItem > halfOfTheHeight) {
      final offset = metrics.extentBefore + offsetOfItem;
      print("offsetOfItem2 = $offsetOfItem offset = $offset");
      Future.delayed(Duration(milliseconds: 50), () {
        _verticalController.animateTo(offset,
            duration: Duration(milliseconds: 1000),
            curve: Curves.fastOutSlowIn);
      });
    }
  }

  void _onEndScrollHorizontal(ScrollMetrics metrics, int index) {
    print("scroll before = ${metrics.extentBefore}");
    print("scroll after = ${metrics.extentAfter}");
    print("scroll inside = ${metrics.extentInside}");
    print("item WIDTH => $cardWidth");

    var halfOfTheWidth = _width / 2;
    var offsetOfItem = metrics.extentBefore % _width;
    if (offsetOfItem < halfOfTheWidth) {
      final offset = metrics.extentBefore - offsetOfItem;
      print("offsetOfItem1 = $offsetOfItem offset = $offset");
      _inProgress = true;
      Future.delayed(Duration(milliseconds: 10), () {
        _horizontalControllers[index].animateTo(offset,
            duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
      });
      _inProgress = false;
    } else if (offsetOfItem > halfOfTheWidth) {
      _inProgress = true;
      final offset = metrics.extentBefore + offsetOfItem;
      print("offsetOfItem2 = $offsetOfItem offset = $offset");
      Future.delayed(Duration(milliseconds: 10), () {
        _horizontalControllers[index].animateTo(offset,
            duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
      });
      _inProgress = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: NotificationListener<ScrollNotification>(
          onNotification: (scrollNotification) {
            if (scrollNotification is ScrollEndNotification &&
                scrollNotification.depth == 0) {
              if (!_inProgress) {
                print('ScrollEndNotification ===> $scrollNotification');
                _onEndScrollVertical(scrollNotification.metrics);
              }
            }
            return null;
          },
          child: buildListViewVertical(),
        ),
      ),
    );
  }

  Widget buildListViewVertical() {
    return ListView.builder(
      itemCount: _itemCountHorizontal,
      itemExtent: cardHeight,
      controller: _verticalController,
      itemBuilder: (BuildContext context, int index) {
        return NotificationListener<ScrollNotification>(
            onNotification: (scrollNotification) {
              if (scrollNotification is ScrollEndNotification &&
                  scrollNotification.depth == 0) {
                print('ScrollEndNotification ===> $scrollNotification');
                _onEndScrollHorizontal(scrollNotification.metrics, index);
              }
              return null;
            },
            child: buildListViewHorizontal(index));
      },
    );
  }

  Widget buildListViewHorizontal(int index) {
    return ListView.builder(
      controller: _horizontalControllers[index],
      physics: ClampingScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: _itemCountHorizontal + 1,
      itemBuilder: (BuildContext context, int index) =>
          index < _itemCountHorizontal
              ? Padding(
                  padding: EdgeInsets.only(
                    left: horizontalPadding,
                    right: horizontalPadding,
                    top: verticalPadding,
                    bottom: verticalPadding,
                  ),
                  child: Container(height: 340, width: 200, color: Colors.red),
                )
              : SizedBox(
                  width: 50,
                ),
    );
  }
}

Вот ссылка на рабочий код в DartPad

Обновлено:

Я написал свою собственную физику для ListView, и это решение убрало инерцию при движении от больших индексов к меньшим (при обратной прокрутке списка), но инерция сохранилась при прокрутке списка от индкеса 0 и выше... Что исправить, чтобы работало в обе стороны?

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

class CustomScrollPhysics extends ScrollPhysics {
  const CustomScrollPhysics({ScrollPhysics parent}) : super(parent: parent);

  @override
  SpringDescription get spring => SpringDescription(damping: 0.1);

  @override
  CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomScrollPhysics(parent: buildParent(ancestor));
  }
}
7
  • Код лучше прикладывать к вопросу в виде текстового кода, а не ссылкой... Инерция происходит из-за проверок, так как в них нет блокировки (или слепых зон). Т.е. когда скролл доходит до нужного места (но с погрешностью), выполняться другая проверка (в другую сторону) из-за которой происходит эффект волны.
    – MiT
    24 авг 2020 в 16:11
  • а как добавить такие проверки? почему вообще появляется такая погрешность, ведь это не физический предмет с массой, а четкая команда animateTo 25 авг 2020 в 3:59
  • ведь это не физический предмет с массой, а он её из кривой взял curve: Curves.fastOutSlowIn.
    – MiT
    25 авг 2020 в 16:12
  • Нет, кривые я менял для пробы, инерция при любом варианте. По моим изысканиям, она задается в ScrollPhysics списка, имитирует пружину. Я даже попробовал переопределить эту физику прокрутки, но нифига не вышло ru.stackoverflow.com/questions/1170183/… 25 авг 2020 в 16:42
  • Можете дать пример, что вы хотите реализовать. Пока это похоже на костыль, возможно это можно сделать по другому...
    – MiT
    25 авг 2020 в 19:11

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.