Proper page navigation

问题

I am trying to navigate to a page called contactView. I have made a list of contacts and I wait to navogate to a contact when I click on there name. This is what I have so far. I am stuck trying to get the navigation to work. Any help would be great.

class ContactList extends StatelessWidget {
  final List<Contact> _contacts;

  ContactList(this._contacts);

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      padding: new EdgeInsets.symmetric(vertical: 8.0),
      itemBuilder: (context, index) {
        return new _ContactListItem(_contacts[index]);
        Navigator.push(context,  MaterialPageRoute(builder: (context) => viewContact())
        );
      },

      itemCount: _contacts.length,
    );

  }
}

回答1:

Here are few things that I can immediately point out (Problems):

• onPressed is not available on ListView.builder() , you may check here: https://docs.flutter.io/flutter/widgets/ListView/ListView.builder.html
• Navigator.push(context, MaterialPageRoute(builder: (context) => viewContact()) this won't execute because it is after return

Suggestions:

• You might need to wrap your _ContactListItem() inside a GestureDetector and implement an onTap callback

Sample Code:

class ContactList extends StatelessWidget {
  final List<Contact> _contacts;

  ContactList(this._contacts);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.symmetric(vertical: 8.0),
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            //TODO: Insert your navigation logic here
            Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) =>
                    ContactView(_contacts[index])));
          },
          child: _ContactListItem(_contacts[index]),
        );
      },
      itemCount: _contacts.length,
    );
  }
}

• Another option could be to change the implementation of _ContactListItem() and may be use a ListTile and implement an onTap in ListTile, you can find it here: https://docs.flutter.io/flutter/material/ListTile-class.html
• You may also try to implement named routes, here is a tutorial for that https://flutter.io/cookbook/networking/named-routes/

I hope this was helpful in someway, let me know if I misinterpreted the question.

回答2:

See if the below is what you're looking for.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Contact Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Contact Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final _contacts = [
    Contact(name: 'John'),
    Contact(name: 'Mary'),
    Contact(name: 'Suzy')
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        title: const Text(
          'Contact Demo',
          style: const TextStyle(color: Colors.white),
        ),
      ),
      body: ListView.builder(
        itemCount: _contacts.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Contact #$index'),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute<void>(
                builder: (BuildContext context) =>
                    ContactView(contact: _contacts[index]),
              ));
            },
          );
        },
      ),
    );
  }
}

class Contact {
  Contact({this.name});

  final String name;
}

class ContactView extends StatelessWidget {
  ContactView({this.contact});

  final Contact contact;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(contact.name),
      ),
      body: Center(
        child: Text(contact.name),
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/52286696/proper-page-navigation