TextButton onPressed 不适用于颤动

Question

所以我尝试通过文本按钮将 flutter 中的 2 个屏幕链接在一起，但它不起作用。

这是我的文本按钮的代码：

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

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

调试控制台：

#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

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

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

Answer 1

这是因为您用于

context

的

Navigator.push(context,...)

位于

MaterialApp

小部件之上，并且不包含

Navigator

的引用，因为导航器是由

MaterialApp

设置的。

您需要在

context

下添加一个新的

MaterialApp

才能找到您的

Navigator

。

将您的

Scaffold

包装在

Builder

小部件中以获得新上下文，或者创建一个新的单独的

FirstWidget

。

方法一：构建器

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

方法2：新建Widget（首选）

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

然后在

home

参数中使用它：

MaterialApp(
  home: FirstWidget(),
)