Эквивалент ScrollToRowAtIndex во Flutter - PullRequest
Новая
       97

Эквивалент ScrollToRowAtIndex во Flutter

0 голосов
/ 06 августа 2020

Предпосылки: Недавно я начал разработку, используя flutter / dart, и, как вы можете догадаться, я пришел из iOS фона. Было очень легко прокрутить UITableView до некоторого заданного indexPath (section, row) в iOS, и я считаю, что то же самое и в Android, но добиться того же во Flutter было настоящей проблемой.

Вопросы: Может ли кто-нибудь указать мне решение, в котором в ListView я могу плавно переходить к заданному индексу?

Что я пробовал: Я пробовал разные пакеты, такие как (https://pub.dev/packages/flutter_section_table_view), потому что мне нужно было представление списка по разделам, оно поставляется с анимацией раздела / строки, но это зависит от точной высоты каждого row и создает карту для перехода или анимации прокрутки до этого значения высоты. Достичь этого непросто, учитывая, что элементы в этом представлении списка динамически c и могут расширяться или сжиматься в зависимости от некоторых действий. Я пытался справиться и с этим, вычисляя высоты и все такое, но это сказывалось на производительности прокрутки. Вот почему я ищу решение с предварительно рассчитанной картой, которая может прокручиваться до тега или ha sh, как и на веб-страницах.

1 Ответ

1 голос
/ 06 августа 2020

Вы можете скопировать и вставить полный код ниже
Вы можете использовать пакет https://pub.dev/packages/scroll_to_index
Вы можете обернуть widget с AutoScrollTag и вызвать controller.scrollToIndex
фрагмент кода 

await controller.scrollToIndex(98,
        preferPosition: AutoScrollPosition.begin);
...     
Widget _wrapScrollTag({int index, Widget child}) => AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: child,
        highlightColor: Colors.black.withOpacity(0.1),
      );

рабочая демонстрация

введите описание изображения здесь

полный код 

import 'dart:math' as math;

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll To Index Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Scroll To Index Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  static const maxCount = 10000;
  final random = math.Random();
  final scrollDirection = Axis.vertical;

  AutoScrollController controller;
  List<List<int>> randomList;

  @override
  void initState() {
    super.initState();
    controller = AutoScrollController(
        viewportBoundaryGetter: () =>
            Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
        axis: scrollDirection);
    randomList = List.generate(maxCount,
        (index) => <int>[index, (1000 * random.nextDouble()).toInt()]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        scrollDirection: scrollDirection,
        controller: controller,
        children: randomList.map<Widget>((data) {
          return Padding(
            padding: EdgeInsets.all(8),
            child: _getRow(data[0], math.max(data[1].toDouble(), 50.0)),
          );
        }).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _scrollToIndex,
        tooltip: 'Increment',
        child: Text(counter.toString()),
      ),
    );
  }

  int counter = -1;
  Future _scrollToIndex() async {
    setState(() {
      counter++;

      if (counter >= maxCount) counter = 0;
    });

    //await controller.scrollToIndex(counter, preferPosition: AutoScrollPosition.begin);
    await controller.scrollToIndex(98,
        preferPosition: AutoScrollPosition.begin);
    controller.highlight(counter);
  }

  Widget _getRow(int index, double height) {
    return _wrapScrollTag(
        index: index,
        child: ListTile(title: Text('index: $index, height: $height')));
  }

  Widget _wrapScrollTag({int index, Widget child}) => AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: child,
        highlightColor: Colors.black.withOpacity(0.1),
      );
}
...