如何在 Flutter 中制作带有标题的多张卡片列表

Posted 2023-02-23

【中文标题】如何在 Flutter 中制作带有标题的多张卡片列表

【英文标题】：How can I make a list of multiple Cards with a headline in Flutter

【发布时间】：2022-01-05 03:01:54

【问题描述】：

我正在尝试创建一个包含标题和多张卡片的容器列表。最后应该是这样的：

脚手架应包含包含卡片行和文本的容器列表。 我不确定这是否聪明，所以如果你有建议如何做得更好...... 到目前为止，这是我的代码（没有文本“文本 1”段）：

body: ListView(
        children: getItems(snapshot),
      ),//getItems(snapshot),
    );


  getItems(AsyncSnapshot<List<html.Document>> snapshot) 
    List<Container> containers = [];
    for(int x = 0; x<snapshot.data!.length; x++) 
      containers.add(toRow(snapshot.data![x]));
    
    return containers;
  

  /*
  Build list of containers first in a Row -> cards....
   */
  toRow(html.Document document)
    return Row(
      children: listofcards(document),
    );
  
  listofcards(html.Document document) 
    List<Card> cards = [];
    return FutureBuilder<List<tage>>(
      future: SiteParser().getData(document),
      builder: (BuildContext context, AsyncSnapshot<List<tage>> document) 
        for(int q = 0; q<document.data!.length; q++) 
          containers.add(_buildCard(document.data![q]));
        
        return cards;
      ,
    );

  
  
  _buildCard(tage snap) 
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      color: MyThemes().choosecardcolor(snap),
      elevation: 5,
      //color: _chooseColor(snap.art.toString()),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(snap.stunde),
              Text(snap.klasse),
              Text(snap.raum)
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(snap.art),
              Text(snap.lehrer),
              Text(snap.mitteilung)
            ],
          )
        ],
      ),
    );

  

目前我不能这样做，因为“返回类型 'List' 不是 'Widget'，这是闭包上下文所要求的。”。

【问题讨论】：

参考我的回答here希望对你有帮助。

这真的取决于你的数据模型，如果每个实体都包含一个数据键，那将很容易

它是一个对象，所以基本上它有

这能回答你的问题吗？ Flutter : How to add a Header Row to a ListView

谢谢@RavindraS.Patil。这帮助很大！

【参考方案1】：

感谢 @ravindra-s-patil 的建议使用 group list view，这更容易了。 这是我写的代码。

  Widget buildrevresh(AsyncSnapshot<List<html.Document>> snapshot) 
    return RefreshIndicator(
      onRefresh: _refresh,
      child: buildData(snapshot),
    );
  
  Widget buildData(AsyncSnapshot<List<html.Document>> snapshot) 
    List<List<tage>> days = [];
    for(int x = 0; x<snapshot.data!.length; x++) 
      days.add(SiteParser().getData(snapshot.data![x]));
    
    return GroupListView(
      itemBuilder: (context, index) 
        return _buildCard(days[index.section][index.index]);
      ,
      sectionsCount: days.length ,
      groupHeaderBuilder: (BuildContext context, int section) 
        return Text(
            days[section].first.datum,
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600));
      ,
      countOfItemInSection: (int section) 
        return days[section].length;
      ,
    );