Flutter 中 ListView.builder 中的 onTap()

Question

早上好，我写了一个小部件，感谢它我可以从 api 下载数据，列出它们并按适当的词动态搜索。 现在，我想在单击列表中的对象后应用该功能转到单个对象的详细信息。 我尝试使用onTap()函数但无济于事

下面粘贴代码：

class _HomePageState extends State<HomePage> {

  List<Order> _notes = List<Order>();
  List<Order> _notesForDisplay = List<Order>();

  Future<List<Order>> fetchNotes() async {
    var url = 'http://10.0.2.2:80/order';
    var response = await http.get(url);

    var notes = List<Order>();

    if (response.statusCode == 200) {
      var notesJson = json.decode(response.body);
      for (var noteJson in notesJson) {
        notes.add(Order.fromJson(noteJson));
      }
    }
    return notes;
  }

  @override
  void initState() {
    fetchNotes().then((value) {
      setState(() {
        _notes.addAll(value);
        _notesForDisplay = _notes;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          iconTheme: IconThemeData(color: Color.fromRGBO(9, 133, 46, 100)),
            backgroundColor: Colors.white,
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: Color.fromRGBO(9, 133, 46, 100),
                ),
                onPressed: (){
                  print('klikniete');
                },
              ),
            ],
        ),
      ),
      body: Container(
        child: FutureBuilder(
          future: fetchNotes(),
          builder: (BuildContext context, AsyncSnapshot snapshot){
            if(_notesForDisplay.length == null){
                return Container(
                  child: Center(
                    child:Text("Ładowanie...")
                  ),
                );
              }else{
                return ListView.builder(
                  itemCount: _notesForDisplay.length+1,
                  itemBuilder: (BuildContext context, int index) {
                    return index == 0 ? _searchBar() : _listItem(index-1);  
                    },
                );
              }
          },
        ),
      ),    
    );
  }

  _searchBar() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Wyszukaj po mieście...'
        ),
        onChanged: (text) {
          text = text.toLowerCase();
          setState(() {
            _notesForDisplay = _notes.where((note) {
              var noteTitle = note.firstName.toLowerCase();
              return noteTitle.contains(text);
            }).toList();
          });
        },
      ),
    );
  }

  _listItem(index) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.only(top: 32.0, bottom: 32.0, left: 16.0, right: 16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              _notesForDisplay[index].firstName,
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold
              ),
            ),
            // Text(
            //   _notesForDisplay[index].lastName,
            //   style: TextStyle(
            //     color: Colors.grey.shade600
            //   ),
            // ),
          ],
        ),
      ),
    );
  }
}

任何人都知道如何在单击后移动到对象的详细信息？

Answer 1

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeBody(),   
    );
  }
}

// Make the detail page
class DetailPage extends StatelessWidget {
  final Order item;

  const DetailPage({this.item});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('${item.firstName} - ${item.lastName}')
    );
  }
}

class HomeBody extends StatefulWidget {
  @override
  _HomeBodyState createState() => _HomeBodyState();
}

class _HomeBodyState extends State<HomeBody> {
  List<Order> _notes = List<Order>();
  List<Order> _notesForDisplay = List<Order>();

  Future<List<Order>> fetchNotes() async {
    var url = 'http://10.0.2.2:80/order';
    var response = await http.get(url);

    var notes = List<Order>();

    if (response.statusCode == 200) {
      var notesJson = json.decode(response.body);
      for (var noteJson in notesJson) {
        notes.add(Order.fromJson(noteJson));
      }
    }
    return notes;
  }

  @override
  void initState() {
    super.initState();
    fetchNotes().then((value) {
      setState(() {
        _notes.addAll(value);
        _notesForDisplay = _notes;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          iconTheme: IconThemeData(color: Color.fromRGBO(9, 133, 46, 100)),
          backgroundColor: Colors.white,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.shopping_cart,
                color: Color.fromRGBO(9, 133, 46, 100),
              ),
              onPressed: () {
                print('klikniete');
              },
            ),
          ],
        ),
      ),
      body: Container(
        child: FutureBuilder(
          future: fetchNotes(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (_notesForDisplay.length == null) {
              return Container(
                child: Center(child: Text("Ładowanie...")),
              );
            } else {
              return ListView.builder(
                itemCount: _notesForDisplay.length + 1,
                itemBuilder: (BuildContext context, int index) {
                  return index == 0 ? _searchBar() : _listItem(index - 1);
                },
              );
            }
          },
        ),
      ),
    );
  }

  _listItem(index) {
    // Add gesture detector for the Card
    // Pass the _notesForDisplay[index] to the DetailPage
    return GestureDetector(
      onTap: () => Navigator.of(context).push(
        MaterialPageRoute(
            builder: (context) => DetailPage(item: _notesForDisplay[index])),
      ),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.only(
              top: 32.0, bottom: 32.0, left: 16.0, right: 16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                _notesForDisplay[index].firstName,
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),
              // Text(
              //   _notesForDisplay[index].lastName,
              //   style: TextStyle(
              //     color: Colors.grey.shade600
              //   ),
              // ),
            ],
          ),
        ),
      ),
    );
  }
}