कैसे स्पंदन में ListView में कुछ बिंदु में आइटम खोजने के लिए?

Aug 18 2020

मुझे सूची दृश्य में बिंदु वस्तु / सूचकांक के नीचे खोजने की आवश्यकता है? क्या इसे प्राप्त करना संभव है? कोई भी ListView.Builder / CustomScrollView / ...। जब स्क्रॉलिंग आइटम / इंडेक्स को वास्तविक समय में अपडेट करना चाहिए। उदा: 'केंद्र सूचकांक $ सूचकांक है'

यह लाल रेखा स्थिति बदल सकती है। शायद केंद्र, शायद ऊपर / नीचे / 0.25 / 0.75 ...

और भी आइटम ऊंचाई शायद तय है / शायद लचीला है

जवाब

1 chunhunghan Aug 18 2020 at 14:22

आप नीचे दिए गए पेस्ट रन को पूर्ण कोड कॉपी
कर सकते हैं आप पैकेज का उपयोग कर सकते हैंhttps://pub.dev/packages/inview_notifier_list
विशेषता के साथ isInViewPortCondition, और में रैप आइटम InViewNotifierWidget, इसकी अनुमति देने के आकार लचीला है, डेमो काम करते हुए देखना
के लिए CustomScrollViewकर सकते हैं उपयोग InViewNotifierCustomScrollView, उदाहरण के यहाँ हैhttps://github.com/rvamsikrishna/inview_notifier_list/blob/master/example/lib/csv_example.dart
सांकेतिक टुकड़ा

isInViewPortCondition:
          (double deltaTop, double deltaBottom, double viewPortDimension) {
        return deltaTop < (0.5 * viewPortDimension) &&
            deltaBottom > (0.5 * viewPortDimension);
      },
...
InViewNotifierWidget(
        id: '$index', builder: (BuildContext context, bool isInView, Widget child) { if (isInView) { inviewIndex = index.toString(); callback(); } return Container( height: index.isEven? 50 : 150 , width: double.infinity, color: Colors.blue, child: Text("$index ${isInView.toString()}"));
        },
      );

पूरा कोड

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(
        title: "test",
      ),
    );
  }
}

String inviewIndex = "";

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  refresh() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {});
    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Center index is $inviewIndex"),
            Expanded(
                child: ImageList(
              callback: refresh,
            ))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class ImageList extends StatelessWidget {
  VoidCallback callback;
  ImageList({this.callback});

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        InViewNotifierList(
          scrollDirection: Axis.vertical,
          initialInViewIds: ['0'],
          isInViewPortCondition:
              (double deltaTop, double deltaBottom, double viewPortDimension) {
            return deltaTop < (0.5 * viewPortDimension) &&
                deltaBottom > (0.5 * viewPortDimension);
          },
          itemCount: 10,
          builder: (BuildContext context, int index) {
            return Container(
              width: double.infinity,
              height: 100.0,
              alignment: Alignment.center,
              margin: EdgeInsets.symmetric(vertical: 50.0),
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  return InViewNotifierWidget(
                    id: '$index', builder: (BuildContext context, bool isInView, Widget child) { if (isInView) { inviewIndex = index.toString(); callback(); } return Container( height: index.isEven? 50 : 150 , width: double.infinity, color: Colors.blue, child: Text("$index ${isInView.toString()}"));
                    },
                  );
                },
              ),
            );
          },
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
            height: 1.0,
            color: Colors.redAccent,
          ),
        )
      ],
    );
  }
}
2 JigarPatel Aug 18 2020 at 13:06

एक तरह से आप यह कर सकते हैं कुछ इस तरह का उपयोग कर रहा है ScrollControllerऔर NotificationListener

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  ScrollController sc = ScrollController();
  int centerItemIndex;
  double screenHeight;

  @override
  Widget build(BuildContext context) {
    
    screenHeight = MediaQuery.of(context).size.height;
    if(centerItemIndex == null){
      centerItemIndex = ((screenHeight/2)/50).floor();    //50 is the height of 1 item
      print('center item = $centerItemIndex'); } return Stack( children: [ NotificationListener( child: ListView.builder( controller: sc, itemCount: 50, itemBuilder: (ctx, index) { return Container( height: 50, color: Colors.green, child: Center(child: Text('$index')),
              );
            },
          ),
          onNotification: (_) {
            int calculatedIndex = ((sc.position.pixels + screenHeight/2)/50).floor();
            if(calculatedIndex != centerItemIndex){
              centerItemIndex = calculatedIndex;
              print('center item = $centerItemIndex');
            }
            return true;
          },
        ),
        Center(
          child: Container(
            height: 2,
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}
1 MAlkhatib Aug 18 2020 at 14:00

समाधान यहाँ है https://github.com/google/flutter.widgets

उपयोग करने का प्रयास करें: स्क्रॉल करने योग्य_पोज्ड_लिस्ट