कैसे स्पंदन में ListView में कुछ बिंदु में आइटम खोजने के लिए?
मुझे सूची दृश्य में बिंदु वस्तु / सूचकांक के नीचे खोजने की आवश्यकता है? क्या इसे प्राप्त करना संभव है? कोई भी ListView.Builder / CustomScrollView / ...
। जब स्क्रॉलिंग आइटम / इंडेक्स को वास्तविक समय में अपडेट करना चाहिए। उदा: 'केंद्र सूचकांक $ सूचकांक है'
यह लाल रेखा स्थिति बदल सकती है। शायद केंद्र, शायद ऊपर / नीचे / 0.25 / 0.75 ...
और भी आइटम ऊंचाई शायद तय है / शायद लचीला है
जवाब
आप नीचे दिए गए पेस्ट रन को पूर्ण कोड कॉपी
कर सकते हैं आप पैकेज का उपयोग कर सकते हैं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,
),
)
],
);
}
}
एक तरह से आप यह कर सकते हैं कुछ इस तरह का उपयोग कर रहा है 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,
),
),
],
);
}
}
समाधान यहाँ है https://github.com/google/flutter.widgets
उपयोग करने का प्रयास करें: स्क्रॉल करने योग्य_पोज्ड_लिस्ट