正确的页面导航

Question

我正在尝试导航到名为contactView 的页面。我已经制作了一个联系人列表，当我点击那里的名字时，我等待导航到一个联系人。这就是我到目前为止所拥有的。我被困在试图让导航正常工作。任何帮助都会很棒。

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

看看下面是不是你要找的。​​p>

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

Answer 2

我可以立即指出以下几点（问题）：

• 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 并在ListTile 中实现onTap，你可以在这里找到它：https://docs.flutter.io/flutter/material/ListTile-class.html
• 你也可以尝试实现命名路由，这里有一个教程 那https://flutter.io/cookbook/networking/named-routes/

我希望这在某种程度上有所帮助，如果我误解了这个问题，请告诉我。