当我的列表为空时,如何显示图像或文本?

Posted

技术标签:

【中文标题】当我的列表为空时,如何显示图像或文本?【英文标题】:How can I display an image or text when my List is empty? 【发布时间】:2020-04-11 17:59:45 【问题描述】:

我是 Flutter 的新手,当我从 listView 中删除所有项目或 listView 为空时,我想显示像 No Record Found 这样的图像或文本。在 android 中,我在这种情况下使用了 setEmptyView(),但我不知道如何在颤动中做到这一点。目前我正在通过 List 有人可以帮帮我吗?

  DatabaseHelper databaseHelper = DatabaseHelper();
  List<TaskModel> list;
  int count = 0;
  TaskModel taskModel;

  @override
  Widget build(BuildContext context) 
    if (list == null) 
      list = List<TaskModel>();
      updateListView();
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Task'),
      ),
      floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.purple,
          child: Icon(Icons.add),
          onPressed: () 
            Navigator.push(context,
                new MaterialPageRoute<void>(builder: (context) 
                  return new CreateTask(TaskModel('', '', '', '', '', '', ''),'Add Task');
                ));
          ),
      body: getTasListView()
    );
  

  ListView getTasListView()
    return ListView.builder(
        itemCount: count,
        itemBuilder: (BuildContext context, int position)
          return Card(
            color: Colors.white,
            elevation: 2.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text(this.list[position].task),
                  onLongPress: () => navigateToDetail(this.list[position],'Edit Task'),
                )
              ],
            ),
          );
        
    );
  

【问题讨论】:

【参考方案1】:

检查长度或数组并决定返回哪个小部件。

   Widget getTasListView() 
        return arrList.isNotEmpty
            ? ListView.builder(
                itemCount: arrList.length,
                itemBuilder: (BuildContext context, int position) 
                  return Card(
                    color: Colors.white,
                    elevation: 2.0,
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(this.list[position].task),
                          onLongPress: () =>
                              navigateToDetail(this.list[position], 'Edit Task'),
                        )
                      ],
                    ),
                  );
                )
            : Center(child: Image.asset("path/image/img.png"));
      

并使用arrList.length 而不是itemCount: count

【讨论】:

【参考方案2】:

概述:我将 SourceClass 列表映射到称为卡片的 MyCard 类列表中。 MyCard 运行一个 Card 小部件,其中使用了 SourceClass 字段。我检查卡片长度以确定是否应显示“未找到记录图像或消息”

@override
Widget build(BuildContext context) 

List<Widget> cards = mylist
    ?.map((mylist) =>
        MyCard(list: listSourceClass))
    ?.toList();    

return new Scaffold(
    key: this._scaffoldKey,
    appBar: setAppBar(
        this._scaffoldKey,
        context,
        "abc"),
    body: cards.length == 0
        ? Text("No Records Found",style:NoRecordsFoundStyle)
        : ListView.builder(
            itemCount: cards?.length,
            itemBuilder: (BuildContext context, int index) 
              return cards[index];
            ),

【讨论】:

以上是关于当我的列表为空时,如何显示图像或文本?的主要内容,如果未能解决你的问题,请参考以下文章

如果我的列表为空,如何显示图像?

数据绑定值为空时如何在 DataGridViewComboBoxColumn 中显示文本

当 listView 为空时,setEmptyView 不显示图像

当搜索字符串为空时,带有连接的搜索查询显示所有行

DataList 为空时需要显示消息

当值为空时,我无法返回我想要的图像[关闭]