时间戳

首页 > 解决方案 > TextButton onpress（）无法正常工作

flutter - TextButton onpress（）无法正常工作

问题描述

所以我试图通过一个Textbutton将两个屏幕链接在一起，但它不起作用。

这是我的文本按钮代码：

TextButton(
                child: Text(
                  "New Page",
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                style: TextButton.styleFrom(
                  backgroundColor: Colors.purple,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondPage()),
                  );
                },
              ),

Button 本身可以正确显示和显示，但是当我按下按钮时，我会在调试控制台上看到它，并且屏幕保持不变。

调试控制台：

#3      MyApp.build.<anonymous closure>
package:layoutesting/main.dart:48
#4      _InkResponseState._handleTap
package:flutter/…/material/ink_well.dart:991
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#f8109
    debugOwner: GestureDetector
    state: possible
    won arena
    finalPosition: Offset(218.4, 512.8)
    finalLocalPosition: Offset(42.4, 10.8)
    button: 1
    sent tap down

这也是我的第二个屏幕的代码。（直接来自颤振网站）：

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

任何帮助表示赞赏，（顺便说一句，我的两个页面都是无状态小部件）。

谢谢！

（完整的第一个小部件代码）：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                width: 100,
                color: Colors.red,
                height: 792,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
                  TextButton(
                    child: Text(
                      "New Page",
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.purple,
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => SecondPage()),
                      );
                    },
                  ),
                ],
              ),
              Container(
                width: 100,
                color: Colors.blue,
                height: 792,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

标签： flutterdartflutter-layout

解决方案

这是因为context您使用的 forNavigator.push(context,...)在您的MaterialApp小部件上方，并且不包含对 aNavigator的引用，因为导航器是由MaterialApp.

您需要一个新context的，MaterialApp以便让您Navigator被发现。

要么将你的小部件包装Scaffold在Builder一个新的上下文中，要么制作一个新的单独的FirstWidget.

方法一：生成器

home: Builder(
  builder: (ctx) => Scaffold(
    ...,
    TextButton(
      ...,
      onPressed: (){
        Navigator.push(ctx,...); //<-- Use the new ctx from Builder
      }
    ),
  ),  
),

方法二：新建小部件（首选）

class FirstWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(...);
}

然后使用这个内部home参数：

MaterialApp(
  home: FirstWidget(),
)

推荐阅读