Flutter自定义分段控件插件custom_segment_control的使用

Flutter自定义分段控件插件custom_segment_control的使用

本Flutter插件提供了一个可定制的分段控件，允许用户在两个选项之间切换。该控件支持各种定制选项，包括文本、颜色、字体大小、动画以及每个分段的背景图像。它还包括拖动手势，以便于无缝交互，并且非常适合需要二元选择的场景，例如在两种模式或选项之间切换。

功能

• 可定制的外观：可以调整文本、字体大小、字体粗细、颜色和背景图像。
• 平滑动画：内置动画，可以自定义曲线和持续时间。
• 交互式拖动手势：用户可以通过滑动手势在选项之间切换。
• 可配置的阴影和边框：可以添加自定义阴影和边框以匹配应用程序的设计。
• 灵活集成：可以轻松地集成到任何Flutter项目中，并支持状态管理。

开始使用

要在项目中使用此插件，请在pubspec.yaml文件中添加依赖项：

dependencies:
  custom_segment_control: ^1.0.0

然后运行以下命令以安装插件：

flutter pub get

使用示例

以下是一个简单的示例，展示了如何使用CustomSegmentControl控件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyApp(),
    );
  }
}

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _pro = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义分段控件示例'),
      ),
      body: Column(
        children: [
          const SizedBox(
            height: 16,
          ),
          const Text('示例：自定义颜色分段控件'),
          Center(
            child: CustomSegmentControl(
              option1Text: '免费',
              option2Text: '专业版',
              onOptionChange: (isProMode) {
                setState(() {
                  _pro = isProMode;
                });
              },
              option1SelectedColor: Colors.black,
              option2SelectedColor: Colors.red,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(
            height: 16,
          ),
          const Text('示例：装饰图像分段控件'),
          Center(
            child: CustomSegmentControl(
              option1Text: '免费',
              option2Text: '专业版',
              onOptionChange: (isProMode) {
                setState(() {
                  _pro = isProMode;
                });
              },
              option1SelectedColor: Colors.black,
              option2DecorationImage: const DecorationImage(
                image: AssetImage('assets/images/example1.jpg'),
                fit: BoxFit.fitWidth,
              ),
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(
            height: 16,
          ),
          const Text(
            '示例：自定义非活动窗口颜色',
          ),
          Center(
            child: CustomSegmentControl(
              option1Text: '免费',
              option2Text: '专业版',
              onOptionChange: (isProMode) {
                setState(() {
                  _pro = isProMode;
                });
              },
              backgroundColor: Colors.green,
              option1SelectedColor: Colors.black,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(
            height: 16,
          ),
          if (_pro) const Text('您正在专业屏幕上'),
          if (!_pro) const Text('您正在免费屏幕上'),
        ],
      ),
    );
  }
}