使用onTap导航器颤振创建变量

Question

这将是很多解释，但我希望有人能够提供帮助。

目前我的appbar上有搜索按钮，当按下时，用文本字段覆盖我的appbar标题

普通的appbar标题是一个图像，我正在添加功能，按下时，它会将您带到主屏幕。这是它变得棘手，因为我需要使用这行代码来实现这一点

new InkWell (
    child: Image.asset(
      'images/logoGrey.png',
      fit: BoxFit.fill,
    ),
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) =>
              LandingPage(),
        ),
      );
    },
  ); 

所以我把它设置为这样的变量

class _ControlsPageState extends State<ControlsPage> {
  Widget appBarTitle = new InkWell (
    child: Image.asset(
      'images/logoGrey.png',
      fit: BoxFit.fill,
    ),
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) =>
              LandingPage(),
        ),
      );
    },
  );

我有这个变量的原因是，当我点击搜索按钮并在我关闭时回到图像时，我可以将appbar（标题）的状态更改为文本字段。

但这不会起作用（“上下文”错误）看到下面这行代码只能在“Widget build（BuildContext context）”下使用，而不是在我的类中....

onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) =>
              LandingPage(),
        ),
      );
    },

底线是我需要我的appbar标题作为变量“appBarTitle”的回调，并且变量在“上下文”中得到错误，无论如何我可以使这个工作吗？

这是appbar代码，以防它有帮助

appBar: AppBar(
          iconTheme: new IconThemeData(color: Theme.CompanyColors.coolGrey),
          backgroundColor: Colors.white,
          centerTitle: true,
          title: appBarTitle ,
          actions: <Widget>[
            new IconButton(
              icon: actionIcon,
              onPressed: () {
                setState(() {
                  if (this.actionIcon.icon == Icons.search) {
                    this.actionIcon =
                        new Icon(Icons.close, color: Theme.CompanyColors.coolGrey);
                    this.appBarTitle = new TextField(
                      onSubmitted: (String str) {
                        setState(() {
                          result = str;
                        });
                        controller.text = "";
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ControlSearchPage(
                                search: result, title: "${widget.title}"),
                          ),
                        );
                      },
                      style: new TextStyle(
                        color: Colors.black,
                      ),
                      decoration: new InputDecoration(
                          prefixIcon:
                              new Icon(Icons.search, color: Theme.CompanyColors.coolGrey),
                          hintText: "Search...",
                          hintStyle: new TextStyle(color: Theme.CompanyColors.coolGrey)),
                    );
                  } else {
                    this.actionIcon =
                        new Icon(Icons.search, color: Theme.CompanyColors.coolGrey);
                    this.appBarTitle = new InkWell (
                      child: Image.asset(
                        'images/logoGrey.png',
                        fit: BoxFit.fill,
                      ),
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) =>
                                LandingPage(),
                          ),
                        );
                      },
                    );
                  }
                });
              },
            ),
          ],
        ),

任何意见将不胜感激

Answer 1

您应该将appBarTitle更改为可以在状态更改时生成窗口小部件而不是将其保存到变量的方法。这样，您可以确保只有在context可用时才会生成它。

// Define a bool to hold the current search state
bool _isSearching = false;

...

// In your build method
appBar: AppBar(
  iconTheme: new IconThemeData(color: Theme.CompanyColors.coolGrey),
  backgroundColor: Colors.white,
  centerTitle: true,
  title: _buildAppBarTitle(),
  actions: <Widget>[
    new IconButton(
      icon: _isSearching
        ? new Icon(Icons.close, color: Theme.CompanyColors.coolGrey)
        : new Icon(Icons.search, color: Theme.CompanyColors.coolGrey),
      onPressed: () {
        setState(() => _isSearching = !_isSearching);
      },
    ),
  ],
),

...

// Define a separate method to build the appBarTitle
Widget _buildAppBarTitle() {
  if (_isSearching) {
    return new TextField(
      onSubmitted: (String str) {
        setState(() {
          result = str;
        });
        controller.text = "";
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ControlSearchPage(
                search: result, title: "${widget.title}"),
          ),
        );
      },
      style: new TextStyle(
        color: Colors.black,
      ),
      decoration: new InputDecoration(
          prefixIcon:
              new Icon(Icons.search, color: Theme.CompanyColors.coolGrey),
          hintText: "Search...",
          hintStyle: new TextStyle(color: Theme.CompanyColors.coolGrey)),
    );
  } else {
    return new InkWell (
      child: Image.asset(
        'images/logoGrey.png',
        fit: BoxFit.fill,
      ),
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) =>
                LandingPage(),
          ),
        );
      },
    );
  }