正确的页面导航(Proper page navigation)

我试图导航到一个名为contactView页面。 我做了一个联系人列表，我迫不及待地navogate到联系人当我点击那里的名字。 这是我到目前为止所。 我坚持试图让导航工作。 任何帮助将是巨大的。

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,
    );

  }
}

Answer 1:

这里有几件事情，我可以立即指出（问题）：

• onPressed不适用于ListView.builder()您可以点击这里： https://docs.flutter.io/flutter/widgets/ListView/ListView.builder.html
• Navigator.push(context, MaterialPageRoute(builder: (context) => viewContact())这将不执行，因为它是后return

建议：

• 您可能需要来包装你_ContactListItem()一内部GestureDetector和实施onTap回调

示例代码：

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

• 另一种选择可能是改变执行_ContactListItem()并且可以使用ListTile和实施onTap在ListTile ，你可以在这里找到： https://docs.flutter.io/flutter/material/ListTile-class.html
• 你也可以尝试推行命名路由，这里是一个教程https://flutter.io/cookbook/networking/named-routes/

我希望这是有帮助的某种方式，让我知道如果我误解了问题。

Answer 2:

看看下面的是你在找什么。

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

文章来源: Proper page navigation