當我的列表為空時如何顯示圖像或文本？

Question

我是flutter的新手，當我從listView中刪除所有項目或listView為空時，我想顯示像No Record Found這樣的圖像或文本。 在 Android 中，我將setEmptyView()用於這種情況，但我不知道如何在顫振中做到這一點。 目前我正在通過 ListCan有人幫我嗎？

  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'),
                )
              ],
            ),
          );
        }
    );
  }
}

Answer 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 。

Answer 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];
            }),