从 api 显示粘性标题列表
Posted
技术标签:
【中文标题】从 api 显示粘性标题列表【英文标题】:display sticky header list from api 【发布时间】:2021-11-21 00:20:24 【问题描述】:大家好, 我使用粘性标题制作了一个列表视图,其中显示了我从 API 响应中获得的标题列表和子列表。我正在获取数据,但我被困在像明智的那样在磁贴或卡片列表中显示它。 下面是我如何获取数据的图像-:
下面是sticky header的代码-:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:sticky_headers/sticky_headers.dart';
import 'package:vcura/Model/Vaccination/Get_Vaccine.dart';
import 'package:vcura/Model/Vaccination/Get_Vaccine_ByID.dart';
import 'package:vcura/Provider/auth_provider.dart';
import 'package:vcura/Screens/home/collapsibleDrawer.dart';
import 'package:vcura/Services/Vaccination/Vaccineservice.dart';
import 'package:vcura/Widgets/custom_loader.dart';
class VaccinationPage extends StatefulWidget
@override
_VaccinationPageState createState() => _VaccinationPageState();
class _VaccinationPageState extends State<VaccinationPage>
with SingleTickerProviderStateMixin
bool isloading = false;
GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
bool drawerOpen = true;
var newFormat = DateFormat("dd-MM-yy");
GetVaccine _vaccine = GetVaccine();
GetVaccineById vaccineById = GetVaccineById();
VaccineService vaccineService = VaccineService();
var idSet = <String>;
var header = <dynamic>[];
// var subtitle = [];
List<VaccineModel> subtitle = [];
@override
void initState()
super.initState();
getdata();
Future getdata() async
setState(()
isloading = true;
);
String authToken = Provider.of<AuthProvider>(context, listen: false).token;
GetVaccine vaccine = await vaccineService.Getvaccine(authToken);
setState(()
_vaccine = vaccine;
for (var d in _vaccine.data)
if (idSet.add(d.vaccineAgeCriteria))
header.add(d.vaccineAgeCriteria);
);
setState(()
isloading = false;
);
@override
Widget build(BuildContext context)
return Scaffold(
key: scaffoldKey,
drawerScrimColor: Colors.transparent,
extendBody: true,
drawer: ComplexDrawer(),
appBar: AppBar(
leading: InkWell(
child: Icon(
Icons.menu,
color: Colors.indigo,
),
onTap: ()
if (drawerOpen)
scaffoldKey.currentState.openDrawer();
else
return null;
,
),
centerTitle: true,
title: Text(
'Vaccination',
style: GoogleFonts.ubuntu(
fontSize: 30,
color: Colors.indigo,
),
),
backgroundColor: Colors.white,
actions: [
InkWell(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Icon(
Icons.search,
color: Colors.indigo,
size: 30,
),
),
onTap: () ,
),
],
elevation: 1,
),
body: isloading
? CustomLoader(size: 50, color: Colors.indigoAccent)
: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: Container(
height: MediaQuery.of(context).size.height,
child: ListView.builder(itemBuilder: (context, index)
subtitle = _vaccine.data
.where((i) => i.vaccineAgeCriteria == header[index])
.toList();
print(subtitle.map((e) => e.vaccine));
return StickyHeaderBuilder(
builder: (context, stuckAmount)
stuckAmount = stuckAmount.clamp(0.0, 1.0);
return Container(
height: 100.0 - (50 * (1 - stuckAmount)),
color:
Color.lerp(Colors.blue, Colors.red, stuckAmount),
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'$header[index]',
style: const TextStyle(color: Colors.white),
),
);
,
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: List<int>.generate(1, (index) => index)
.map(
(item) => Container(
height: subtitle.length * 50.0,
width: MediaQuery.of(context).size.width,
child: ListTile(
title: Text(
'$subtitle.map((e) => e.vaccine)'),
), //_vaccine.data[index].vaccine
),
)
.toList(),
),
),
);
)),
),
);
以下是我得到的数据样本 -
"data": [
"id": "0616c0b6-d798-08d974ba51cb",
"vaccine": "Bacillus Calmette–Guérin (BCG)",
"vaccineAgeCriteria": "Birth",
"dose": 1,
"vaccineDate": "1996-12-31T18:30:00"
,
"id": "1e109992-d79b-08d974ba51cb",
"vaccine": "Diptheria, Tetanus and Pertussis vaccine (DTwP 1)",
"vaccineAgeCriteria": "6 weeks",
"dose": 1,
"vaccineDate": "0001-01-01T00:00:00"
,
"id": "a985b9d5-d7a3-08d974ba51cb",
"vaccine": "Haemophilus influenzae type B (Hib 2)",
"vaccineAgeCriteria": "10 weeks",
"dose": 1,
"vaccineDate": "0001-01-01T00:00:00"
,
"id": "1597403a-d7a4-08d974ba51cb",
"vaccine": "Rotavirus 2",
"vaccineAgeCriteria": "10 weeks",
"dose": 1,
"vaccineDate": "0001-01-01T00:00:00"
,
],
"exceptionInfo": null,
"message": null,
"messages": null,
"isSuccess": true
请帮忙。
【问题讨论】:
您想在磁贴或卡片列表中显示您的数据吗? 实际上在两个不同的页面中 【参考方案1】:用ListView.builder
包裹你的ListTile
。
ListView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: subtitle.length,
itemBuilder: (context, index)
return ListTile(
title: Text(subtitle[index].vaccine),
);
,
),
【讨论】:
和列表。生成我用过的。我应该删除它吗? 只需替换您的ListTile
很高兴为您提供帮助。祝您编码愉快!以上是关于从 api 显示粘性标题列表的主要内容,如果未能解决你的问题,请参考以下文章
Mapbox iOS SDK 3.1 如何使注释标注具有粘性