Flutter自定义滑动分段控件插件custom_sliding_segmented_control的使用

描述

CustomSlidingSegmentedControl插件允许您灵活地配置用于显示控件的小部件。您可以添加颜色、速度、大小、初始值、动画等属性，以满足您的应用需求。

示例代码

下面提供了一个完整的示例demo，帮助您快速了解如何在Flutter项目中使用custom_sliding_segmented_control插件。

添加依赖

首先，在您的pubspec.yaml文件中添加依赖：

dependencies:
  custom_sliding_segmented_control: ^latest_version # 请替换为最新版本号

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

创建Dart文件

创建一个新的Dart文件（例如main.dart），并将以下代码粘贴到文件中：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedValue = 2;

  void onValueChanged(int newValue) {
    setState(() {
      selectedValue = newValue;
      print('Selected value: $selectedValue');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Sliding Segmented Control Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomSlidingSegmentedControl<int>(
              initialValue: selectedValue,
              children: {
                1: const Text('News daily portal'),
                2: const Text('Map'),
                3: const Text('Paper'),
              },
              decoration: BoxDecoration(
                color: CupertinoColors.lightBackgroundGray,
                borderRadius: BorderRadius.circular(8),
              ),
              thumbDecoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(6),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(.3),
                    blurRadius: 4.0,
                    spreadRadius: 1.0,
                    offset: const Offset(0.0, 2.0),
                  ),
                ],
              ),
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInToLinear,
              onValueChanged: onValueChanged,
            ),
            const SizedBox(height: 20),
            Text(
              'Selected Value: $selectedValue',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
    );
  }
}

运行项目

确保所有设置完成后，您可以直接运行项目。此示例将展示一个带有三个选项（“News daily portal”，“Map”和“Paper”）的滑动分段控件，并在选择不同的选项时打印所选值。

更多例子

如果您想了解更多用法，请访问官方GitHub仓库查看更多示例。

通过上述步骤，您应该能够成功地将custom_sliding_segmented_control集成到您的Flutter应用程序中。希望这对您有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。