Flutter单例按钮控制插件singleton_button的使用

Flutter单例按钮控制插件singleton_button的使用

特性

通过全局字符串管理按钮状态。可以检查按钮是否自上次检查以来已被点击。

使用方法

以下是一个完整的示例代码，展示如何使用 singleton_button 插件：

import 'package:flutter/material.dart';

// 假设 singleton_button 是一个现有的插件
class SingletonButton extends StatelessWidget {
  final String key; // 全局唯一标识符
  final Widget child;
  final VoidCallback? onPressed;

  const SingletonButton(this.key, {required this.child, this.onPressed});

  static SingletonButton? get(String key) {
    // 模拟从全局存储中获取按钮实例
    return SingletonButton._instances[key];
  }

  static final Map<String, SingletonButton> _instances = {};

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        if (onPressed != null) {
          onPressed!();
        }
        // 模拟记录按钮点击状态
        _instances[key]!.markAsClicked();
      },
      child: child,
    );
  }

  void markAsClicked() {
    print('$key 被点击了');
  }
}

void testBuild() {
  // 创建两个按钮实例
  SingletonButton("no callback", child: Text("无回调按钮"));
  SingletonButton("yes callback", child: Text("有回调按钮"), onPressed: () {
    print("有回调按钮被点击");
  });
}

void test() {
  // 在其他地方检查按钮是否被点击过
  if (SingletonButton.get("no callback")?.markAsClicked() ?? false) {
    print("无回调按钮已被点击");
  }
  if (SingletonButton.get("yes callback")?.markAsClicked() ?? false) {
    print("有回调按钮已被点击");
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('singleton_button 示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: testBuild,
                child: Text('创建按钮'),
              ),
              ElevatedButton(
                onPressed: test,
                child: Text('检查按钮点击状态'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter单例按钮控制插件singleton_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter单例按钮控制插件singleton_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，单例模式通常用于确保某个类只有一个实例，并且提供一个全局访问点。对于按钮控制，你可能希望确保只有一个按钮在特定时间内可以被点击，或者确保按钮的状态在整个应用中保持一致。下面是一个简单的示例，展示如何使用单例模式来控制按钮。

1. 创建单例类

首先，我们创建一个单例类 SingletonButtonController，用于管理按钮的状态。

class SingletonButtonController {
  // 私有构造函数
  SingletonButtonController._privateConstructor();

  // 静态实例
  static final SingletonButtonController _instance = SingletonButtonController._privateConstructor();

  // 获取单例实例
  static SingletonButtonController get instance => _instance;

  // 按钮状态
  bool _isButtonEnabled = true;

  // 获取按钮状态
  bool get isButtonEnabled => _isButtonEnabled;

  // 禁用按钮
  void disableButton() {
    _isButtonEnabled = false;
  }

  // 启用按钮
  void enableButton() {
    _isButtonEnabled = true;
  }
}

2. 在UI中使用单例控制器

接下来，我们在Flutter的UI中使用这个单例控制器来控制按钮的状态。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Singleton Button Control'),
        ),
        body: Center(
          child: SingletonButtonWidget(),
        ),
      ),
    );
  }
}

class SingletonButtonWidget extends StatefulWidget {
  [@override](/user/override)
  _SingletonButtonWidgetState createState() => _SingletonButtonWidgetState();
}

class _SingletonButtonWidgetState extends State<SingletonButtonWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: SingletonButtonController.instance.isButtonEnabled
              ? () {
                  // 按钮点击逻辑
                  print('Button clicked!');
                  SingletonButtonController.instance.disableButton();
                  setState(() {});
                }
              : null,
          child: Text('Click Me'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            SingletonButtonController.instance.enableButton();
            setState(() {});
          },
          child: Text('Enable Button'),
        ),
      ],
    );
  }
}
回到顶部