Как прокрутить ListView программно с помощью StatelessWidget и провайдера во Flutter? - PullRequest
Новая
       47

Как прокрутить ListView программно с помощью StatelessWidget и провайдера во Flutter?

0 голосов
/ 10 апреля 2020

Согласно многим учебным пособиям для провайдеров Flutter, рекомендуется использовать StatelessWidget вместо StatefulWidget с провайдером. Но я не могу найти способ прокрутки ListView при использовании StatelessWidget.

Предположим, у нас есть ListView с большим количеством строк текста, который может быть динамически добавлен и должен всегда прокручиваться до средней строки. Например: 

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

class MyData with ChangeNotifier {
  List<String> _lines = [];
  MyData() {
    for (int i = 0; i < 100; i++) {
      _lines.add("line $i");
    }
  }

  List<String> get lines => _lines;
  void add(line) {
    _lines.add(line);
    notifyListeners();
  }
}

void main() {
  MyData data = new MyData();
  final app = ChangeNotifierProvider<MyData>.value(value: data, child: MyApp());
  runApp(app);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class DataPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _data = Provider.of<MyData>(context);
    return Scaffold(
        appBar: AppBar(),
        body: ListView.builder(
            itemCount: _data.lines.length,
            itemBuilder: (context, index) {
              return Text(_data.lines[index]);
            }));
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _data = Provider.of<MyData>(context);
    return Scaffold(
        appBar: AppBar(
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  _data.add("new line");
                })
          ],
        ),
        body: Center(child: Text("${_data.lines.length} lines")),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => DataPage())),
          child: Icon(Icons.list),
        ));
  }
}

Есть ли способ сохранить прокрутку до середины ListView при добавлении новой строки?

1 Ответ

0 голосов
/ 10 апреля 2020

с WidgetsBinding.instance, scrollTo вызывает после сборки виджета. Каждый раз, когда провайдер MyData отправляет уведомление

, я надеюсь, что это нормально для вас, высота является требованием 

class DataPage extends StatelessWidget {

  final _controller = ScrollController();
  final _height = 30.0;

  @override
  Widget build(BuildContext context) {
    final _data = Provider.of<MyData>(context);

    scrollTo() {
      print(_data.lines.length);
      _controller.jumpTo(_data.lines.length / 4 * _height);
    }

    WidgetsBinding.instance
        .addPostFrameCallback((_) => scrollTo());

    return Scaffold(
        appBar: AppBar(),
        body: ListView.builder(
          controller: _controller,
            itemCount: _data.lines.length,
            itemBuilder: (context, index) {
              return new Container(child: Text(_data.lines[index]), height: _height,);
            }));
  }
}
...