如何在Flutter中禁用按钮？ [英] How do I disable a Button in Flutter?

问题描述

我刚刚开始了解Flutter，但是我在弄清楚如何设置按钮的启用状态时遇到了麻烦。

I'm just starting to get the hang of Flutter, but I'm having trouble figuring out how to set the enabled state of a button.

docs，它说将 onPressed 设置为null可以禁用按钮，并为其赋予一个值以启用它。如果按钮在生命周期内仍保持相同状态，那就很好。

From the docs, it says to set onPressed to null to disable a button, and give it a value to enable it. This is fine if the button continues to be in the same state for the lifecycle.

给我的印象是，我需要创建一个自定义的有状态小部件，该小部件将允许我进行更新按钮的启用状态（或onPressed回调）。

I get the impression I need to create a custom Stateful widget that will allow me to update the button's enabled state (or onPressed callback) somehow.

所以我的问题是我该怎么做？这似乎是一个非常简单的要求，但是我在文档中找不到有关该操作的任何信息。

So my question is how would I do that? This seems like a pretty straightforward requirement, but I can't find anything in the docs on how to do it.

谢谢。

推荐答案

我认为您可能想引入一些辅助函数来 build 您的按钮以及一个有状态的小部件

I think you may want to introduce some helper functions to build your button as well as a Stateful widget along with some property to key off of.

• 使用StatefulWidget / State并创建一个变量来保存条件（例如 isButtonDisabled ）


• 最初将其设置为true（如果您要这样做的话）


• 渲染按钮时，不要将 onPressed 的值直接设置为 null 或某些函数 onPressed：（）{}


• 相反，有条件地使用三元函数或辅助函数（示例


• 作为此条件的一部分，检查 isButtonDisabled 并返回 null 或某些功能。


• 按下按钮时（或每当要禁用按钮时），请使用 setState（（）=> isButtonDisabled = true）来翻转条件变量。


• Flutter将再次调用 build（）方法并具有新状态，按钮将使用 null 按下处理程序呈现并被禁用。

• Use a StatefulWidget/State and create a variable to hold your condition (e.g. isButtonDisabled)
• Set this to true initially (if that's what you desire)
• When rendering the button, don't directly set the onPressed value to either null or some function onPressed: () {}
• Instead, conditionally set it using a ternary or a helper function (example below)
• Check the isButtonDisabled as part of this conditional and return either null or some function.
• When the button is pressed (or whenever you want to disable the button) use setState(() => isButtonDisabled = true) to flip the conditional variable.
• Flutter will call the build() method again with the new state and the button will be rendered with a null press handler and be disabled.

这里是使用Flutter计数器项目的更多上下文。

Here's is some more context using the Flutter counter project.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool _isButtonDisabled;

  @override
  void initState() {
    _isButtonDisabled = false;
  }

  void _incrementCounter() {
    setState(() {
      _isButtonDisabled = true;
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("The App"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            _buildCounterButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildCounterButton() {
    return new RaisedButton(
      child: new Text(
        _isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: _isButtonDisabled ? null : _incrementCounter,
    );
  }
}

在此示例中，我使用内联三元有条件设置 Text 和 onPressed ，但将其提取到函数中可能更合适（可以使用同样的方法也可以更改按钮的文本）：

In this example I am using an inline ternary to conditionally set the Text and onPressed, but it may be more appropriate for you to extract this into a function (you can use this same method to change the text of the button as well):

Widget _buildCounterButton() {
    return new RaisedButton(
      child: new Text(
        _isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: _counterButtonPress(),
    );
  }

  Function _counterButtonPress() {
    if (_isButtonDisabled) {
      return null;
    } else {
      return () {
        // do anything else you may want to here
        _incrementCounter();
      };
    }
  }

这篇关于如何在Flutter中禁用按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！