Flutter三态切换插件tri

Flutter三态切换插件tri_switcher的使用

TriSwitcher介绍

TriSwitcher 是一个为 Flutter 提供的切换器组件，它允许用户在三个状态之间进行切换。这对于需要轻松切换三个状态的场景非常合适。

安装

要使用 TriSwitcher，请将以下依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  tri_switcher: ^0.0.5

然后在 Dart 代码中导入该包：

import 'package:tri_switcher/tri_switcher.dart';

预览

下图展示了 TriSwitcher 的的预览效果：

属性

以下是 TriSwitcher 的一些属性：

final ValueChanged onChanged: 回调函数，用于处理状态变化。
final SwitchPosition? initialPosition: 初始位置。
final Color firstStateBackgroundColor: 第一状态背景颜色。
final Color secondStateBackgroundColor: 第二状态背景颜色。
final Color thirdStateBackgroundColor: 第三状态背景颜色。
final Color firstStateToggleColor: 第一状态切换颜色。
final Color secondStateToggleColor: 第二状态切换颜色。
final Color thirdStateToggleColor: 第三状态切换颜色。
final List<widget> icons: 图标列表。
final BoxShape toggleShape: 切换形状。
final BorderRadiusGeometry borderRadius: 圆角半径。
final Duration duration: 动画持续时间。
final Curve curve: 动画曲线。
final double? size: 大小。

使用方法

只需将 TriSwitcher 组件添加到您的 Flutter 应用，并定义回调函数来处理状态变化即可。

TriSwitcher(
  onChanged: (SwitchPosition position) {
    // Handle state changes here
  },
),

示例代码

下面是一个完整的示例代码，展示如何使用 TriSwitcher：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TriSwitcher Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SwitcherExample(),
    );
  }
}

class SwitcherExample extends StatelessWidget {
  const SwitcherExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            centerTitle: true,
            title: Text(
              'TriSwitcher Example',
              style: TextStyle(color: Colors.deepPurple.shade900),
            )),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(16),
            margin: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.deepPurple.shade100,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('ThemeMode',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        color: Colors.deepPurple.shade900)),
                TriSwitcher(
                  initialPosition: SwitchPosition.left,
                  firstStateBackgroundColor: Colors.deepPurple,
                  secondStateBackgroundColor: Colors.deepPurple.shade200,
                  thirdStateBackgroundColor: Colors.deepPurple.shade400,
                  thirdStateToggleColor: Colors.deepPurple.shade900,
                  borderRadius: BorderRadius.circular(20),
                  icons: const [
                    Icon(Icons.sunny, color: Colors.amber),
                    Icon(Icons.nightlight_round, color: Colors.purple),
                    Icon(Icons.settings_outlined, color: Colors.white),
                  ],
                  onChanged: (SwitchPosition position) {
                    print('Switch position: $position');
                  },
                ),
              ],
            ),
          ),
        ));
  }
}

更多关于Flutter三态切换插件tri_switcher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

更多关于Flutter三态切换插件tri_switcher的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用tri_switcher插件来实现三态切换的示例代码。这个插件允许用户在三种状态之间切换，非常适合需要多种选择的应用场景。

首先，确保你已经在pubspec.yaml文件中添加了tri_switcher依赖：

dependencies:
  flutter:
    sdk: flutter
  tri_switcher: ^最新版本号 # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用TriSwitcher组件：

导入tri_switcher包：

import 'package:tri_switcher/tri_switcher.dart';

创建一个包含TriSwitcher的Widget：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TriSwitcher Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('TriSwitcher Demo'),
        ),
        body: Center(
          child: TriSwitcherDemo(),
        ),
      ),
    );
  }
}

class TriSwitcherDemo extends StatefulWidget {
  @override
  _TriSwitcherDemoState createState() => _TriSwitcherDemoState();
}

class _TriSwitcherDemoState extends State<TriSwitcherDemo> {
  TriState currentState = TriState.first;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TriSwitcher(
          value: currentState,
          onChanged: (TriState newValue) {
            setState(() {
              currentState = newValue;
            });
          },
          firstIcon: Icons.star_border,
          secondIcon: Icons.star_half,
          thirdIcon: Icons.star,
          firstColor: Colors.grey,
          secondColor: Colors.amber,
          thirdColor: Colors.red,
          firstLabel: 'First',
          secondLabel: 'Second',
          thirdLabel: 'Third',
        ),
        SizedBox(height: 20),
        Text(
          'Current State: ${currentState.toString().split('.').last}',
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }
}

在这个示例中：

我们创建了一个简单的Flutter应用，其中包含一个TriSwitcher组件。
TriSwitcher组件的value属性表示当前的状态，onChanged回调在用户更改状态时被调用。
我们为每种状态设置了不同的图标（firstIcon, secondIcon, thirdIcon）和颜色（firstColor, secondColor, thirdColor）。
还可以为每种状态设置标签（firstLabel, secondLabel, thirdLabel），但在这个示例中，我们只使用了图标来区分状态。
当前状态通过一个Text组件显示在页面上，每当状态改变时，这个文本也会更新。

这个示例展示了如何使用tri_switcher插件来实现三态切换，并根据用户的选择动态更新UI。你可以根据需要进一步自定义图标、颜色、标签等属性。