Flutter设置状态onPressed on RaisedButton

问题描述

我正在构建一个测验应用程序，该应用程序将在用户提交所选答案后显示正确答案的解释.

I am building a quiz app which reveals the explanation for the correct answer after the user submits their chosen answer.

在布局上有两个按钮-下一个问题"和"提交答案."

There are two buttons on the layout -- "Next Question" & "Submit Answer."

在初始状态下，下一个问题"按钮是微妙的，因为它不可单击，而只能单击提交答案"按钮.

In the initial state, the "Next Question" button is subtle as it is not clickable and only the "Submit Answer" buttons is clickable.

单击此处查看初始状态的布局

单击提交答案"按钮时，应执行两个操作:
1.然后，提交答案"按钮将变得微妙且不可单击，而下一个问题"按钮将变为粗体且充满活力，当然也可单击.
2.此外，在两个按钮的行下方，还会出现一个附加部分(也许我不知道另一个容器)，其中显示了正确答案的说明.

When the "Submit Answer" button is clicked, two actions should happen:
1. The "Submit Answer" button then becomes subtle and not clickable and the "Next Question" button becomes bold and vibrant and, of course, clickable.
2. Also, below the row of the two buttons, an additional section appears (another container maybe, i don't know) revealing the explanation for the correct answer.

在实现上述两个操作方面我需要一些帮助

I'd like some help in implementing the above two actions

到目前为止，这是我拥有的代码:

So far, this is the code that I have:

Widget nextQuestion = new RaisedButton(
  padding: const EdgeInsets.all(10.0),
  child: const Text('Next Question'),
  color: Color(0xFFE9E9E9),
  elevation: 0.0,
  onPressed: () {
    null;
  },
);

Widget submitAnswer = new RaisedButton(
  padding: const EdgeInsets.all(10.0),
  child: const Text('Submit Answer'),
  color: Color(0xFFE08284),
  elevation: 5.0,
  onPressed: () {
    null;
  },
);

return Scaffold(
  body: new CustomScrollView(
    slivers: <Widget>[
      new SliverPadding(
        padding: new EdgeInsets.all(0.0),
        sliver: new SliverList(
          delegate: new SliverChildListDelegate([
            new Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[nextQuestion, submitAnswer]),
            new SizedBox(height: 50.0),
          ]),
        ),
      ),
    ],
  ),
);

推荐答案

您可以使用 setState 方法实现.

我会执行类似的操作.

import 'package:flutter/material.dart';

  void main() {
    runApp(MaterialApp(
      title: 'Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    ));
  }


  class FirstScreen extends StatefulWidget {
    @override
    _FirstScreenState createState() => _FirstScreenState();
  }

  class _FirstScreenState extends State<FirstScreen> {
    int submit = 0;

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text("Demo"),
          ),
          body: new Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  new RaisedButton(
                      padding: const EdgeInsets.all(10.0),
                      child: const Text('Next Question'),
                      color: submit == 0 ? Color(0xFFE9E9E9) : Colors.grey,
                      elevation: 0.0,
                      onPressed: () {
                        submit == 0 ? null : Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => SecondScreen()),
                        );
                      }
                  ),
                  new RaisedButton(
                    padding: const EdgeInsets.all(10.0),
                    child: const Text('Submit Answer'),
                    color: Color(0xFFE08284),
                    elevation: 0.0,
                    onPressed: () {
                      setState(() {
                        submit = 1;
                      });
                    },
                  ),
                ],
              ),
              submit == 1 ? new Container(
                child: new Text("hello World"),
              ) : new Container()
            ],
          )
      );
    }
  }



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

这篇关于Flutter设置状态onPressed on RaisedButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！