从 api 显示粘性标题列表

Posted 2023-02-23

【中文标题】从 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

很高兴为您提供帮助。祝您编码愉快！