Flutter开关控制插件toggleable的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter 开关控制插件 toggleable 的使用

在 Flutter 中，toggleable 是一个用于处理开关状态的插件。它提供了一种简洁的方式来管理开关状态，并且支持通过枚举值来表示开关的状态。

Features

Toggleable - enum

Toggleable 是一个枚举类型，包含两个值：on 和 off。

Toggleable t1 = Toggleable.on;
Toggleable t2 = Toggleable.off;

No more verbose if else - Use when()

你可以使用 when() 方法来避免冗长的 if-else 语句：

Toggleable toggleable = Toggleable.on;
// ... some logics that changes the toggleable
final result = toggleable.when(
  on: () => 1,
  off: () => 2,
);

它还提供了一些别名 getter

final t1 = Toggleable.on;

t1.isOn; // true
t1.isEnabled; // true

t1.isOff; // false
t1.isDisabled; // false

你可以从布尔值初始化它

expect(Toggleable.from(true), Toggleable.on);
expect(Toggleable.from(false), Toggleable.off);

ToggleableState

ToggleableState 是一个包装类，帮助你更方便地使用 Toggleable。

final state = ToggleableState(initialState: Toggleable.off);

state.toggle(); // 切换状态
state.on(); // 打开状态
state.off(); // 关闭状态

Usage

以下是一个完整的示例 demo，展示了如何使用 toggleable 插件来管理开关状态：

import 'package:flutter/material.dart';
import 'package:toggleable/toggleable.dart';

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

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

class _MyAppState extends State<MyApp> {
  final ToggleableState mySwitch = ToggleableState(initialState: Toggleable.off);
  int someOtherState = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    mySwitch.addListener(
      turnOnCallback: () {
        setState(() {
          someOtherState++;
        });
      },
      turnOffCallback: () {
        setState(() {
          someOtherState--;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Toggleable Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  mySwitch.toggle();
                  setState(() {});
                },
                child: Text(mySwitch.isOn ? 'Turn Off' : 'Turn On'),
              ),
              SizedBox(height: 20),
              Text('Current State: ${mySwitch.isOn ? 'On' : 'Off'}'),
              SizedBox(height: 20),
              Text('Some Other State: $someOtherState'),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用toggleable包来实现开关控制的示例代码。请注意，toggleable包并不是Flutter官方包的一部分，因此我假设你提到的toggleable是指一个自定义的或第三方包，用于处理开关控件。然而，在Flutter中，通常我们使用Switch小部件来实现开关控制。如果toggleable包存在且具有类似功能，那么代码结构会相似。以下是一个使用Flutter内置的Switch控件的示例，以及一个假设的toggleable包使用示例（如果它存在类似API）。

使用Flutter内置的Switch控件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Switch Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool isSwitchedOn = false;

  void _toggleSwitch(bool value) {
    setState(() {
      isSwitchedOn = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Example'),
      ),
      body: Center(
        child: Switch(
          value: isSwitchedOn,
          onChanged: _toggleSwitch,
        ),
      ),
    );
  }
}

假设使用toggleable包（如果它存在）

由于toggleable包不是Flutter的标准库部分，我将提供一个假设性的使用示例，基于它可能提供的API。请注意，这个代码不会直接运行，除非toggleable包确实存在且API相似。

// 假设toggleable包存在并且可以这样导入
import 'package:toggleable/toggleable.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toggleable Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool isToggledOn = false;

  void _toggle() {
    setState(() {
      isToggledOn = !isToggledOn;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggleable Example'),
      ),
      body: Center(
        // 假设ToggleableWidget是toggleable包中的一个控件
        child: ToggleableWidget(
          value: isToggledOn,
          onChanged: (newValue) {
            setState(() {
              isToggledOn = newValue;
            });
          },
        ),
      ),
    );
  }
}

在上面的假设性代码中，ToggleableWidget是一个假设的控件，它可能存在于toggleable包中，并且具有与Switch控件类似的API。如果toggleable包实际上存在，你应该查阅其文档以获取正确的控件名称和API使用方法。

如果你确实在寻找一个特定的第三方包，请确保该包存在于pub.dev（Flutter的包管理器），并查阅其文档以获取正确的使用方法。如果toggleable包不存在，你可能需要使用Flutter内置的Switch控件或其他第三方包来实现类似的功能。

回到顶部