一个Listview的简单实现。
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main(List<String> args) {
runApp(
MaterialApp(
home: HomePage(),
),
);
}
class ItemBox extends StatelessWidget {
final int index;
const ItemBox({Key? key, required this.index}) : super(key: key);
Color get color => Colors.blue.withOpacity((index % 10) * 0.1);
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
color: color,
height: 56,
child: Text(
'第 $index 个',
style: const TextStyle(fontSize: 20),
),
);
}
}
class HomePage extends StatelessWidget {
HomePage({Key? key}) : super(key: key);
final List<int> data = List.generate(60, (index) => index + 1);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scrollable(
viewportBuilder: _buildViewPort,
),
);
}
Widget _buildViewPort(BuildContext context, ViewportOffset position) {
return Viewport(
offset: position,
slivers: [_buildSliverList()],
);
}
Widget _buildSliverList() {
return SliverList(
delegate: SliverChildBuilderDelegate(
_buildItemByIndex,
childCount: data.length,
),
);
}
Widget _buildItemByIndex(BuildContext context, int index) {
return ItemBox(
index: data[index],
);
}
}
