如果我在列出我的列表中搜索的东西，屏幕会空白

Question

我在另一个目录中创建了一个列表，该目录是JSON数据的列表，并且在屏幕上显示了它，还添加了一个用作搜索栏的文本字段。如果我搜索列表中的字母（或字母的组合），但是当我从列表中搜索某些内容时，整个页面除外时，Appbar除外时，它可以正常工作。 这是我的代码：

import 'package:flutter/material.dart';
import 'dart:convert';

import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _items = [];
  List _itemsForDisplay = [];

  // Fetch content from the json file
  Future<void> readJson() async {
    final String response = await rootBundle.loadString('assets/Symptoms.json');
    final data = await json.decode(response);
    setState(() {
      _items = data["Symptoms"];
      _itemsForDisplay = _items;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    readJson();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Diagnose',
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
            // Display the data loaded from sample.json

            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return index == 0 ? _searchBar() : _ListItem(index);
                },
                itemCount: _itemsForDisplay.length,
              ),
            )
          ],
        ),
      ),
    );
  }

  _searchBar() {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: TextField(
        decoration: InputDecoration(hintText: 'Search'),
        onChanged: (text) {
          text = text.toLowerCase();
          setState(() {
            _itemsForDisplay = _items.where((item) {
              var itemTitle = item.toLowerCase();
              return itemTitle.contains(text);
            }).toList();
          });
        },
      ),
    );
  }

  _ListItem(index) {
    return Card(
      margin: const EdgeInsets.all(10),
      child: ListTile(
        leading: Text(_itemsForDisplay[index]),
      ),
    );
  }
}

这是一张图片，然后搜索我列表的实体的东西

，当我搜索“”。或我列表中没有的任何东西：

Answer 1

在您的项目中，构建器仅返回_listItem（index），然后放置_Searchbar在扩展的外部。在当前代码中，您从列表跳过了第一个元素，而是显示搜索栏，这是错误的。这就是为什么当列表为0时，您什么都看不到。因为建造者没有被执行。

因此，您的构建方法应该看起来像这样：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Diagnose',
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
            // Display the data loaded from sample.json
            _searchBar(),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return _ListItem(index);
                },
                itemCount: _itemsForDisplay.length,
              ),
            )
          ],
        ),
      ),
    );
  }