我刚开始学习Flutter . 我遇到了一个很大的问题,那就是在复杂的列表中滚动不好 . 假设我们的ListView中有5种不同的项目类型,某些项目类型必须显示图像,并且它是无限滚动 . 我阅读了很多关于ListView for Flutter的文章和帖子,我看到的所有内容都是带有文本的简单列表 . 如何进行平滑滚动?

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: 'Startup Name Generator',

home: new RandomWords(),

);

}

}

class RandomWords extends StatefulWidget {

@override

RandomWordsState createState() => new RandomWordsState();

}

class RandomWordsState extends State {

final List _suggestions = [];

final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);

List items = List.generate(10, (i) => i);

ScrollController _scrollController = new ScrollController();

bool isPerformingRequest = false;

@override

void initState() {

super.initState();

_scrollController.addListener(() {

if (_scrollController.position.pixels ==

_scrollController.position.maxScrollExtent) {

_getMoreData();

}

});

}

@override

void dispose() {

_scrollController.dispose();

super.dispose();

}

_getMoreData() async {

if (!isPerformingRequest) {

setState(() => isPerformingRequest = true);

List newEntries = await fakeRequest(

items.length, items.length + 10); //returns empty list

if (newEntries.isEmpty) {

double edge = 50.0;

double offsetFromBottom = _scrollController.position.maxScrollExtent -

_scrollController.position.pixels;

if (offsetFromBottom < edge) {

_scrollController.animateTo(

_scrollController.offset - (edge - offsetFromBottom),

duration: new Duration(milliseconds: 500),

curve: Curves.easeOut);

}

}

setState(() {

items.addAll(newEntries);

isPerformingRequest = false;

});

}

}

Future> fakeRequest(int from, int to) async {

return Future.delayed(Duration(seconds: 1), () {

return List.generate(to - from, (i) => i + from);

});

}

Widget _buildProgressIndicator() {

return new Padding(

padding: const EdgeInsets.all(8.0),

child: new Center(

child: new Opacity(

opacity: isPerformingRequest ? 1.0 : 0.0,

child: new CircularProgressIndicator(),

),

),

);

}

@override

Widget build(BuildContext context) {

return new Scaffold(

appBar: AppBar(

title: Text(""),

),

body: ListView.builder(

itemCount: items.length + 1,

itemBuilder: (context, index) {

if (index == items.length) {

return _buildProgressIndicator();

} else {

if (index % 5 == 0) {

return Image.network(

"http://sanctum-inle-resort.com/wp-content/uploads/2015/11/Sanctum_Inl_Resort_Myanmar_Flowers_Frangipani.jpg",

height: 200.0,

);

} else if (index.isOdd) {

return Container(

padding: EdgeInsets.all(16.0),

child: ListTile(

leading: Icon(Icons.person),

title: Text('This is title'),

),

);

} else {

return ListTile(title: new Text("Number $index"));

}

}

},

controller: _scrollController,

),

);

}

}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐