Flutter 应用程序开发 - 如何创建一个根据 Provider 设置的布尔值禁用（或不禁用）的按钮

Question

我有一个按钮（基于 ElevatedButton 的自定义按钮），我想根据 bool 变量 (isCategorySet) 禁用（或不禁用）该按钮。 isCategorySet 来自 Provider - 所以是 Future。

我目前已设置它，因此屏幕是使用有状态类构建的

class MyClass extends StatefulWidget {
  @override
  _MyClassState createState() => _MyClassState();
}

class _MyClassState extends State<MyClassProfiles> {
  late Provider1 provider1;
  late bool _iscategoryset;

在 _MyClassState 的开头我初始化：

  @override
  void initState() {
    super.initState();
    provider1 = Provider.of<provider1>(context, listen: false);

    _checkCategory();
  }

接下来是我的 _checkCategory 函数：

//checks if any cateogries set
  void _checkCategory() async {
    await provider1.fetchSessions("category");
    if (provider1.categoryList.isEmpty) {
      //if no category set
      _iscategoryset = false;
      print('no category set $_iscategoryset');
    } else {
      // category is set
      _iscategoryset = true;
      print('category set $_iscategoryset');
    }
  }

代码的下一部分构建页面，我的按钮代码如下所示：

CustomButtons.CustomButton(
    text: "Sort by move",

     onPress: () {
         setState(() {
             selectedSortOption = 'move';
         });

         },
       ),

OnPress 相当于 OnPressed（CustomButton 派生自 ElevatedButton）。

我尝试编写一个条件作为 onPress 的一部分，如果 _iscategoryset 为 true，则调用 setState。但它似乎并不喜欢 _iscategoryset 是未来。

我每次都必须取出按钮并将其构建为小部件吗？我希望避免这种情况！

Answer 1

一般来说，可以通过将

onPressed

设置为

null

来禁用按钮。

下面的例子就是上面这句话的清晰演示：

我们只有一个标志变量，其中只有当该布尔标志等于 true 时按钮才可单击，并且 浮动操作按钮会反转标志变量的值

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = false;
  @override
  Widget build(BuildContext context) {

    return Scaffold(
     appBar: AppBar(title: Text('Test Diability of buttons')),
      body:Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FilledButton(
              child: Text('Pressable?'),
              onPressed: flag ? (){} : null,
            ),
            Text('Flag value is $flag'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: reverseFlag,
        tooltip: 'reverse',
        child: const Icon(Icons.flag_circle_outlined),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
  void reverseFlag(){
    setState((){
      flag = !flag;
    });
  }
}