Question

我陷入了代码的这一部分。

我为欢迎页面创建了一个文件，为按钮创建了另一个文件。

创建按钮很容易，问题出在onPressed部分。

我创建了一个函数pageNavigation，并尝试在按钮的onPressed部分中调用它。

 pageNavigation(page) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => page),
  );
}

但是按钮和欢迎页面位于不同的文件中。 WelcomePage类：

    class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;

    return Scaffold(
      body: 
          Column(
            children: [
              Button(
                height: height,
                txt: 'Criar conta agora',
                txtStyle: kWhiteButtonTextStyle,
                buttonColor: Colors.transparent,
                onPressed: pageNavigation(LoginPage());
              ),
              Button(
                height: height,
                txt: 'Entrar',
                txtStyle: kBlackButtonTextStyle,
                buttonColor: kWhiteColor,
                onPressed: pageNavitation(CreateAccountPage());
              ),
            ],
          ),
    );
  }
}

因此，我创建了一个名为onPressed的函数变量，并在onPressed按钮文件中对其进行了调用。按钮类别：

    class Button extends StatelessWidget implements WelcomePage {
  const Button({
    Key key,
    @required this.height,
    @required this.txt,
    @required this.txtStyle,
    @required this.buttonColor,
    @required this.onPressed
  }) : super(key: key);

  final double height;
  final String txt;
  final TextStyle txtStyle;
  final Color buttonColor;
  final Function onPressed,

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            txt,
            style: GoogleFonts.rubik(textStyle: txtStyle),
          ),
        ],
      ),
      color: buttonColor,
      padding: EdgeInsets.only(
        top: height * 0.018,
        bottom: height * 0.018,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      onPressed: onPressed,
    );
  }
}

我认为错误可能出在按钮类中，但我不知道如何解决。

Answer 1

当我对您的代码进行一些修改后，它运行良好。这是完整的代码应用程序。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return WelcomePage();
  }
}

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    pageNavigation() {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Container()),
      );
    }

    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Column(
        children: [
          Button(
              height: height,
              txt: 'Criar conta agora',
              buttonColor: Colors.transparent,
              onPressed: pageNavigation),
          Button(height: height, txt: 'Entrar', onPressed: pageNavigation),
        ],
      ),
    );
  }
}

class Button extends StatelessWidget implements WelcomePage {
  const Button({
    Key key,
    @required this.height,
    @required this.txt,
    @required this.txtStyle,
    @required this.buttonColor,
    @required this.onPressed,
  }) : super(key: key);

  final double height;
  final String txt;
  final TextStyle txtStyle;
  final Color buttonColor;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            txt,
          ),
        ],
      ),
      color: buttonColor,
      padding: EdgeInsets.only(
        top: height * 0.018,
        bottom: height * 0.018,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      onPressed: onPressed,
    );
  }
}

Answer 2

您的onPressed应该看起来像这样：

    onPressed: () => pageNavigation(LoginPage()),

如果您忘记了() =>，应用程序将导航到第一条路线，即LoginPage在这里

按钮onPressed不会运行该功能

2 个答案: