最近app想要类似于ios的那种tableview,区头悬停的效果。最后找到了一个大神的方案。比较不错,UI效果也达到了理想效果。
具体的实现代码:
主要是gsy大神的这个类:(地址:https://github.com/CarGuo/gsy_flutter_demo)
stick_render.dart
stick_widget.dart
这两个类需要下载下来,放到你的项目中去,然后实现这种效果的方法就很简单了。
准备好数据源:
Map<String, List<String>> itemSectionList = {
'远程模块': ["远程拜访"],
'订单提醒模块': ["远程订单"],
'拜访提醒模块': ["店前拜访提醒"],
'门店拜访': ["1-进入门店"],
'生动化执行': ["2-生动化执行"],
'店铺检查': ["3-店铺检查"],
'库存建议': ["4-店铺检查"],
'店员教育': ["5-店员教育"],
'结束拜访': ["6-结束拜访"],
'未拜访原因': ["7-未拜访原因"],
};
实现方法:
class sectionTableview extends StatelessWidget {
sectionTableview({super.key});
//区头数组
final List _titles = itemSectionList.keys.toList();
@override
Widget build(BuildContext context) {
return ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
itemCount: itemSectionList.length,
itemBuilder: (context, index) {
String sectiontitle = _titles[index];
String cellValue = itemSectionList[sectiontitle]?.first as String;
return Container(
height: 100.0,
child: StickWidget(
///区头header
stickHeader: Container(
height: 50.0,
color: Colors.greenAccent[400],
padding: const EdgeInsets.only(left: 10.0),
alignment: Alignment.centerLeft,
child: InkWell(
onTap: () {
print("header");
String title = _titles[index];
Log.i('----->$title');
},
child: Text(
'模块:$sectiontitle',
),
),
),
///content
stickContent: InkWell(
onTap: () {
print("content");
},
child: Container(
margin: const EdgeInsets.only(left: 10),
// color: Colors.pinkAccent,
height: 50.0,
child: Text(cellValue),
),
),
),
);
});
}
}
需要注意的是区头和cell的高度是固定的,而且外面的container高度也是固定的。具体的实现原来需要看StickRender这个类。
Untitled.gif
网友评论