单击建议时转发到下一页

Question

我在我的 flutter 应用程序中使用了自动完成文本字段。在文本字段中键入文本时，用户会获得建议（通过 JSON）。然后用户应该点击一个建议并且应该被转发到“SecondPage”。同时选择玩家的国家也应该传递给“SecondPage”。

在 itemSubmitted 部分，我尝试整合我的计划，但没有成功。 “SecondPage”没有启动。你能帮忙吗？

这是我的代码：

@override
  Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomPadding: false,
    appBar: AppBar(
      title: Text('Search'),
    ),
    body: new Center(
        child: new Column(children: <Widget>[
          new Column(children: <Widget>[
            searchTextField = AutoCompleteTextField<PlayersForSearch>(
                style: new TextStyle(color: Colors.black, fontSize: 16.0),
                decoration: new InputDecoration(
                    suffixIcon: Container(
                      width: 85.0,
                      height: 60.0,
                    ),
                    contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
                    filled: true,
                    hintText: 'Search Player Name',
                    hintStyle: TextStyle(color: Colors.black)),
                itemSubmitted: (item) {
                  SecondPage(item.country);
                  MaterialPageRoute(builder: (context) => SecondPage(item.country));

                  setState(() => searchTextField.textField.controller.text =
                      item.autocompleteterm);
                },
                clearOnSubmit: false,
                key: key,
                suggestions: PlayerViewModel.player_search,
                itemBuilder: (context, item) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(item.autocompleteterm,
                        style: TextStyle(
                            fontSize: 16.0
                        ),),
                      Padding(
                        padding: EdgeInsets.all(15.0),
                      ),
                      Text(item.country,
                      )
                    ],
                  );
                },
                itemSorter: (a, b) {
                  return a.autocompleteterm.compareTo(b.autocompleteterm);
                },
                itemFilter: (item, query) {
                  return item.autocompleteterm
                      .toLowerCase()
                      .startsWith(query.toLowerCase());
                }),
          ]),
        ])));
  }

Answer 1

请尝试以下操作：

。创建一个 SecondPage.dart
。放入无状态或有状态的 Widget
。在您的 materialApp()

Answer 2

我相信缺少的是 Navigator.push 调用 push SecondPage 到路由堆栈。 MaterialPageRoute 不会将自己放入 pages/routes.

的堆栈中

例子

当您将焦点放在文本字段上并按 Enter 键时，它将导航到具有 TextFormField 值的 SecondPage。

import 'package:flutter/material.dart';

class NavTextFieldPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nav TextField Submit'),
      ),
      body: NavTextfieldExample(),
    );
  }
}

class NavTextfieldExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        TextFormField(
          decoration: InputDecoration(
            labelText: 'Navigate to next page',
          ),
          initialValue: 'Japan',
          onFieldSubmitted: (item) {
            /// Using default Navigator from Scaffold, *push* onto stack SecondPage
            Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context) => SecondPage(item)));
          },
        )
      ],
    );
  }
}

class SecondPage extends StatelessWidget {
  final String country;

  SecondPage(this.country);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nav Second Page'),
      ),
      body: Center(
        child: Text('Country: $country'),
      ),
    );
  }
}

上面的关键部分是：

            Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context) => SecondPage(item)));

它使用 Navigator 对象将路由推送到您的路由堆栈（即页面）。

单击建议时转发到下一页

Forwarding to the next page when clicking on suggestion

forwarding

autocomplete

dart

search-suggestion

flutter

例子