प्रोग्राम सूची के अंत में स्क्रॉल करना

Question 1

मेरे पास एक स्क्रॉल करने योग्य ListViewआइटम है जहां वस्तुओं की संख्या गतिशील रूप से बदल सकती है। जब भी सूची के अंत में एक नया आइटम जोड़ा जाता है, तो मैं प्रोग्रामेटिक रूप ListViewसे अंत तक स्क्रॉल करना चाहूंगा । (उदाहरण के लिए, चैट संदेश सूची जैसी कोई चीज़ जहां नए संदेश अंत में जोड़े जा सकते हैं)

मेरा अनुमान है कि मुझे ScrollControllerअपनी Stateवस्तु बनाने और इसे मैन्युअल रूप से ListViewकंस्ट्रक्टर में भेजने की आवश्यकता होगी, इसलिए मैं बाद में नियंत्रक पर कॉल animateTo()/ jumpTo()विधि कर सकता हूं । हालाँकि, चूंकि मैं अधिकतम स्क्रॉल ऑफ़सेट को आसानी से निर्धारित नहीं कर सकता, इसलिए बस एक scrollToEnd()प्रकार का ऑपरेशन करना असंभव लगता है (जबकि मैं 0.0इसे प्रारंभिक स्थिति में स्क्रॉल करने के लिए आसानी से पास कर सकता हूं )।

क्या इसे प्राप्त करने का एक आसान तरीका है?

का उपयोग करना reverse: trueमेरे लिए एक सही समाधान नहीं है, क्योंकि मैं चाहूंगा कि आइटम शीर्ष पर गठबंधन किए जाएं जब ListViewव्यूपोर्ट के भीतर केवल कुछ ही आइटम फिट होते हैं ।

Question 2

यदि आप एक सिकुड़ते-लपेटते का उपयोग ListViewकरते हैं reverse: true, तो इसे 0.0 पर स्क्रॉल करना है जो आप चाहते हैं।

import 'dart:collection';

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Example',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _messages = <Widget>[new Text('hello'), new Text('world')];
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          decoration: new BoxDecoration(backgroundColor: Colors.blueGrey.shade100),
          width: 100.0,
          height: 100.0,
          child: new Column(
            children: [
              new Flexible(
                child: new ListView(
                  controller: _scrollController,
                  reverse: true,
                  shrinkWrap: true,
                  children: new UnmodifiableListView(_messages),
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: () {
          setState(() {
            _messages.insert(0, new Text("message ${_messages.length}"));
          });
          _scrollController.animateTo(
            0.0,
            curve: Curves.easeOut,
            duration: const Duration(milliseconds: 300),
          );
        }
      ),
    );
  }
}

Question 3

इसे प्राप्त करने के लिए उपयोग ScrollController.jumpTo()या ScrollController.animateTo()विधि।

उदाहरण:

final _controller = ScrollController();

@override
Widget build(BuildContext context) {
  
  // After 1 second, it takes you to the bottom of the ListView
  Timer(
    Duration(seconds: 1),
    () => _controller.jumpTo(_controller.position.maxScrollExtent),
  );

  return ListView.builder(
    controller: _controller,
    itemCount: 50,
    itemBuilder: (_, __) => ListTile(title: Text('ListTile')),
  );
}

यदि आप चिकनी स्क्रॉलिंग चाहते हैं, तो इसके बजाय jumpToउपरोक्त उपयोग करने के लिए

_controller.animateTo(
  _controller.position.maxScrollExtent,
  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

Question 4

listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent) सबसे सरल तरीका है।

Question 5

सही परिणाम पाने के लिए मैंने कॉलिन जैक्सन और कोप्सऑनराड के उत्तरों को निम्न प्रकार से संयोजित किया:

_scrollController.animateTo(
                              _scrollController.position.maxScrollExtent,
                              curve: Curves.easeOut,
                              duration: const Duration(milliseconds: 500),
                            );

Question 6

मुझे सूची के निचले भाग में जाने के लिए स्क्रॉल नियंत्रक का उपयोग करने की कोशिश करने में इतनी समस्या है कि मैं दूसरे दृष्टिकोण का उपयोग करता हूं।

सूची को नीचे तक भेजने के लिए एक घटना बनाने के बजाय, मैं उलट सूची का उपयोग करने के लिए अपने तर्क को बदल देता हूं।

इसलिए, हर बार मेरे पास एक नया आइटम होता है, मैं बस सूची के शीर्ष पर सम्मिलित किया जाता हूं।

// add new message at the begin of the list 
list.insert(0, message);
// ...

// pull items from the database
list = await bean.getAllReversed(); // basically a method that applies a descendent order

// I remove the scroll controller
new Flexible(
  child: new ListView.builder(
    reverse: true, 
    key: new Key(model.count().toString()),
    itemCount: model.count(),
    itemBuilder: (context, i) => ChatItem.displayMessage(model.getItem(i))
  ),
),

Question 7

विजेटबाइंड को इनस्टैट में न रखें, इसके बजाय, आपको इसे उस विधि में रखना होगा जो आपके डेटा को डेटाबेस से लाती है। उदाहरण के लिए, इस तरह। यदि कोई गलती से लगा दिया जाता है, तो scrollcontrollerकिसी भी सूची में संलग्न नहीं होगा।

    Future<List<Message>> fetchMessage() async {

    var res = await Api().getData("message");
    var body = json.decode(res.body);
    if (res.statusCode == 200) {
      List<Message> messages = [];
      var count=0;
      for (var u in body) {
        count++;
        Message message = Message.fromJson(u);
        messages.add(message);
      }
      WidgetsBinding.instance
          .addPostFrameCallback((_){
        if (_scrollController.hasClients) {
          _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
        }
      });
      return messages;
    } else {
      throw Exception('Failed to load album');
    }
   }

Question 8

आप इसका उपयोग कर सकते हैं जहां 0.09*heightसूची में एक पंक्ति की ऊंचाई है और _controllerइसे इस तरह परिभाषित किया गया है_controller = ScrollController();

(BuildContext context, int pos) {
    if(pos != 0) {
        _controller.animateTo(0.09 * height * (pos - 1), 
                              curve: Curves.easeInOut,
                              duration: Duration(milliseconds: 1400));
    }
}