嵌套的 listview 有两层,外层和内层,常用来表示有层级关系的数据视图。
外层的listview不必限制是否无限滑动,而内层则必须是有限的。如果想要内层也是无限滚动的,那么建议将页面做成两个。内层的数据放到第二个页面。
如何使用listview显示有限的数据呢?
ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, subIndex) {
return ListTile(
title: Text(" " ),
);
},
separatorBuilder: (context, subIndex) => Divider(height: .0),
itemCount: sub.length,
),
重点在于 shrinkWrap
和 physics: NeverScrollableScrollPhysics()
完整的嵌套代码
import 'package:flutter/material.dart';
/// 两级
class ListTwoClass extends StatefulWidget {
@override
_ListTwoClassState createState() => _ListTwoClassState();
}
class _ListTwoClassState extends State<ListTwoClass> {
var _words = <Item>[];
@override
void initState() {
super.initState();
_retrieveData();
}
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: _words.length,
itemBuilder: (context, index) {
return _buildItem(index);
},
separatorBuilder: (context, index) => Divider(height: .0),
);
}
void _onTap(int index) {
setState(() {
Item item = _words[index];
item.isOpen = !item.isOpen;
});
}
Widget _buildItem(int index) {
if (_words[index].isOpen) {
Item item = _words[index];
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
title: Text(item.value.toString()),
onTap: () => _onTap(index),
),
ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
color: Colors.blue,
child: ListTile(
title: Text(_words[index].value.toString()),
onTap: () => _onTap(index),
),
);
},
separatorBuilder: (context, index) => Divider(height: .0),
itemCount: item.subSize,
),
],
);
} else {
return ListTile(
title: Text(_words[index].value.toString()),
onTap: () => _onTap(index),
);
}
}
void _retrieveData() {
Future.delayed(Duration(seconds: 1)).then((e) {
setState(() {
//重新构建列表
_words.insertAll(
_words.length,
[
Item(1, 0, false),
Item(2, 2, true),
Item(3, 3, false),
],
);
});
});
}
}
class Item {
int value;
int subSize;
bool isOpen;
Item(this.value, this.subSize, this.isOpen);
}
class SubItem {
int value;
SubItem(this.value);
}
重点在于 _buildItem
方法。
网友评论