Flutter 在 RaisedButton 上设置状态 onPressed

Question

我正在构建一个测验应用程序，它会在用户提交他们选择的答案后显示对正确答案的解释。

布局上有两个按钮 -- "Next Question" & "Submit Answer."

在初始状态下，"Next Question" 按钮很微妙，因为它不可点击，只有 "Submit Answer" 按钮可点击。

Click Here to View the Layout of the Initial State

单击 "Submit Answer" 按钮时，应发生两个操作：
1. 然后 "Submit Answer" 按钮变得微妙且不可点击，而 "Next Question" 按钮变得粗体且充满活力，当然可以点击。
2. 此外，在这两个按钮所在的行下方，会出现一个附加部分（可能是另一个容器，我不知道），显示正确答案的解释。

我需要一些帮助来实施上述两个操作

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

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

Answer 1

您可以使用 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 在 RaisedButton 上设置状态 onPressed

Flutter Set State onPressed on RaisedButton

setstate

dart

flutter

flutter-layout